/* Ontwerp C · Zacht — basis A, lijnen en zwevende vormen uit B, Righteous + San Francisco */
:root{
  --bg:#F1EDE1; --ink:#3A2F2A; --espresso:#3A2F2A; --muted:#5C5048; --line:rgba(58,47,42,.14);
  --salie:#8A9A62; --matcha:#B3C06A; --kobalt:#042179; --oranje:#D2561F; --rood:#9C1A17;
  --kop:'Righteous',system-ui,sans-serif;
  --tekst:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--tekst);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.label{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--kop);font-weight:400;letter-spacing:0}

/* kop */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{width:40px;height:40px}
.logo span{font-size:14px;letter-spacing:.32em;font-weight:300}
nav{display:flex;gap:28px}
nav a{font-size:14px;text-decoration:none;color:var(--muted)}
nav a:hover,nav a[aria-current]{color:var(--ink)}

/* achtergrond: zwevende vormen en stromende lijnen */
.lagen{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.laag{position:absolute;border-radius:50%;filter:blur(60px);animation:zweef 28s ease-in-out infinite alternate}
/* alleen groen op de achtergrond; rood, kobalt en oranje zijn accenten */
.laag.l1{width:420px;height:360px;background:var(--salie);opacity:.26;top:-100px;right:-80px}
.laag.l2{width:320px;height:280px;background:var(--salie);opacity:.2;bottom:-80px;left:-60px;animation-duration:34s}
.laag.l3{width:280px;height:240px;background:var(--matcha);opacity:.28;top:52%;right:22%;animation-duration:22s}
@keyframes zweef{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,30px) scale(1.1)}}
.stroom{position:absolute;left:0;width:100%;top:140px;height:520px;pointer-events:none;z-index:1;opacity:.35}
.stroom path{fill:none;stroke:var(--espresso);stroke-width:.5;stroke-dasharray:1 3}

/* held */
.hero{display:flex;flex-direction:column;padding:24px 0 28px;position:relative}
.hero h1{font-size:clamp(44px,6.4vw,80px);line-height:1.02;margin:8px 0 32px;max-width:11ch}
.hero .vraag{font-size:19px;color:var(--muted);margin:0 0 40px}
.keuzes{display:flex;flex-wrap:wrap;gap:12px}
.keuze{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:16px;padding:14px 24px;border:1px solid var(--line);border-radius:999px;background:rgba(241,237,225,.6);backdrop-filter:blur(6px);transition:border-color .3s ease, transform .3s ease}
.keuze:hover{border-color:var(--ink);transform:translateY(-2px)}
.keuze .vorm{width:22px;height:20px;background:var(--kleur);border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;animation:morph 9s ease-in-out infinite alternate}
@keyframes morph{0%{border-radius:46% 54% 42% 58% / 52% 44% 56% 48%}100%{border-radius:60% 40% 55% 45% / 40% 62% 38% 60%}}

/* surreal detail: druppel met oog */
.druppel{position:absolute;right:4%;top:22%;width:180px;aspect-ratio:1/1.15;border-radius:50% 50% 48% 52% / 60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,.08) 65%);border:1px solid var(--line);display:grid;place-items:center;animation:ademen 9s ease-in-out infinite}
@keyframes ademen{0%,100%{transform:scale(1)}50%{transform:scale(1.05) translateY(-6px)}}
.eye{width:74px;height:37px;animation:blink 8s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}

/* spiraal */
.spiraal-blok{border-top:1px solid var(--line);padding:8px 0 110px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px 56px}
.spiraal-kant{display:flex;flex-direction:column;align-items:center;gap:4px}
.spiraal-kant .rimpel{margin-top:-24px}
.spiraal-kant .label{position:relative;margin-top:-64px}
.rimpel{position:relative;width:min(380px,88vw);aspect-ratio:1;display:grid;place-items:center;margin:0}
.rimpel svg{position:absolute;inset:0;width:100%;height:100%;animation:draai 120s linear infinite}
.rimpel ellipse{fill:none;stroke:var(--espresso);stroke-width:.7;stroke-dasharray:1 5;stroke-linecap:round;opacity:.5}
@keyframes draai{to{transform:rotate(360deg)}}
.spiraal-knop{position:relative;background:none;border:0;padding:0;cursor:pointer;border-radius:50%;line-height:0;transition:transform .3s ease}
.spiraal-knop:hover{transform:scale(1.15)}
.spiraal-knop:focus-visible{outline:1px dotted var(--ink);outline-offset:12px}
.spiraal-vorm{display:block;width:min(200px,45vw);aspect-ratio:1;background:var(--espresso);-webkit-mask:url(pikirriku-spiraal.png) center/contain no-repeat;mask:url(pikirriku-spiraal.png) center/contain no-repeat;transition:transform 2.2s cubic-bezier(.2,.7,.1,1),background-color .3s ease}
.spiraal-knop:hover .spiraal-vorm,.spiraal-knop:focus-visible .spiraal-vorm{background:var(--rood)}
.knop{font:inherit;font-size:14px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:13px 26px;cursor:pointer}
.knop.licht{background:transparent;color:var(--ink);border:1px solid var(--line)}
.knop:hover{opacity:.85}
.quote{max-width:560px;margin:18px 0 0;opacity:0;transform:translateY(8px);transition:opacity .8s ease, transform .8s ease;min-height:110px}
.quote.zichtbaar{opacity:1;transform:none}
.quote p{font-family:var(--kop);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.2;margin:0 0 16px;color:var(--ink)}
@media (max-width:760px){.spiraal-blok{grid-template-columns:1fr;text-align:center;justify-items:center}.spiraal-kant{order:-1}.quote{margin:12px auto 0}}

/* piekerknop */
.pieker-knop{position:fixed;right:20px;bottom:20px;z-index:10;font:inherit;font-size:14px;background:var(--rood);color:var(--bg);border:0;padding:14px 22px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:10px}
.pieker-knop::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bg);animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.5}}
dialog{border:0;padding:0;background:var(--bg);color:var(--ink);width:min(500px,calc(100vw - 32px));border-radius:24px}
dialog::backdrop{background:rgba(28,26,23,.35);backdrop-filter:blur(4px)}
.paneel{padding:34px 30px 26px;display:flex;flex-direction:column;gap:14px}
.paneel h3{font-size:30px;margin:0;line-height:1.15}
.paneel p{margin:0}
.paneel .rij{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.paneel .klein{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:6px}

/* blog */
.blog-kop{padding:72px 0 36px}
.blog-kop h1{font-size:clamp(40px,6vw,72px);margin:14px 0 0;line-height:1.05}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 48px}
.filter{font:inherit;font-size:14px;background:rgba(241,237,225,.6);border:1px solid var(--line);color:var(--ink);padding:9px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.filter::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--kleur,var(--ink))}
.filter[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:48px 32px;padding-bottom:120px}
.kaart{text-decoration:none;display:flex;flex-direction:column;gap:10px}
.kaart .vorm{aspect-ratio:4/1;border-radius:22px;position:relative;overflow:hidden;background:#E9E3D3}
.kaart .vorm::before{content:"";position:absolute;width:62%;height:70%;left:19%;top:15%;background:var(--kleur);border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;filter:blur(1px);transition:border-radius .9s ease, transform .9s ease}
.kaart .vorm.foto::before{display:none}
.kaart .vorm.foto svg{width:100%;height:100%;display:block;transition:transform .9s ease}
.kaart:hover .vorm.foto svg{transform:scale(1.04)}
.kaart:hover .vorm::before{border-radius:60% 40% 55% 45% / 40% 62% 38% 60%;transform:rotate(10deg) scale(1.05)}
.kaart h2{font-size:26px;line-height:1.2;margin:4px 0 0}
.kaart p{margin:0;color:var(--muted);font-size:15px}
.leeg{color:var(--muted);font-family:var(--kop);font-size:24px;font-weight:400;padding:40px 0}

footer{border-top:1px solid var(--line);padding:28px 0 96px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
footer a{color:var(--muted)}

@media (max-width:760px){
  .druppel{width:110px;top:auto;bottom:40px;right:0}
  .eye{width:48px;height:24px}
  nav{gap:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* blogpost: achtergrond en accenten in de kleur van het onderwerp */
.thema-existentieel{--thema:var(--kobalt)}
.thema-mental-health{--thema:var(--salie)}
.thema-random-feitjes{--thema:var(--oranje)}
.thema-eten-drinken{--thema:var(--rood)}
.post-pagina .laag.l1{background:var(--thema);opacity:.2}
.post-pagina .laag.l2{background:var(--thema);opacity:.14}
.post-pagina .laag.l3{background:var(--thema);opacity:.12}
.post-pagina .stroom{top:90px;height:420px;opacity:.28}
.post{max-width:720px;margin:0 auto;padding:72px 0 120px}
.post-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.thema-pil{font-size:13px;color:var(--bg);background:var(--thema);border-radius:999px;padding:6px 14px;text-decoration:none}
.concept-pil{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--thema);border:1px dashed var(--thema);border-radius:999px;padding:5px 12px}
.post h1{font-size:clamp(38px,5.6vw,64px);line-height:1.08;margin:22px 0 40px}
.post h2{font-size:clamp(24px,3vw,30px);line-height:1.2;margin:56px 0 14px;padding-top:28px;border-top:1px dotted var(--line)}
.post p,.post li{margin:0 0 18px}
.post ul{padding-left:20px;margin:0 0 18px}
.post li::marker{color:var(--thema)}
.post a{color:var(--ink);text-decoration-color:var(--thema);text-decoration-style:dotted;text-underline-offset:3px}
.post a:hover{color:var(--thema)}
.post .bronnen{font-size:14px;color:var(--muted)}
.invullen{border:1px dashed var(--thema);border-radius:16px;padding:14px 18px;background:rgba(241,237,225,.7)}
.invullen strong{color:var(--thema)}
.terug{display:inline-block;margin-top:48px;font-size:14px;text-decoration:none}
.post a.thema-pil{color:var(--bg);text-decoration:none}
.post a.thema-pil:hover{opacity:.85}

/* blogpagina: lijnen en vlekken lopen langzaam over in de kleur van het gekozen onderwerp */
.stroom path{transition:stroke 2.4s ease}
.blog-pagina .stroom{position:fixed;top:0;height:100vh;opacity:.45}
.blog-pagina .stroom path{stroke-width:.7}
.laag{transition:background-color 3s ease, opacity 3s ease}
/* bij Alles: elke vlek in een eigen themakleur */
body[data-onderwerp="alles"] .laag.l1{background:var(--kobalt);opacity:.12}
body[data-onderwerp="alles"] .laag.l2{background:var(--salie);opacity:.24}
body[data-onderwerp="alles"] .laag.l3{background:var(--oranje);opacity:.16}
body[data-onderwerp="existentieel"] .laag{background:var(--kobalt);opacity:.14}
body[data-onderwerp="mental-health"] .laag{background:var(--salie);opacity:.24}
body[data-onderwerp="random-feitjes"] .laag{background:var(--oranje);opacity:.16}
body[data-onderwerp="eten-drinken"] .laag{background:var(--rood);opacity:.12}


/* reeks: doorverwijzing naar het volgende deel onderaan een post */
.post a.volgende{display:flex;flex-direction:column;gap:6px;margin-top:56px;padding:22px 26px;border:1px dashed var(--thema);border-radius:20px;text-decoration:none;background:rgba(241,237,225,.7)}
.post a.volgende .label{color:var(--thema)}
.post a.volgende span:last-child{font-family:'Righteous',sans-serif;font-size:clamp(20px,2.6vw,26px);line-height:1.2;color:var(--ink)}
.post a.volgende:hover{border-style:solid}
.post a.volgende + .terug{margin-top:28px}
/* reeks: korte uitleg bovenaan elk los deel */
.reeks-intro{margin:-12px 0 40px;padding:16px 20px;border-left:3px solid var(--thema);background:rgba(241,237,225,.6);border-radius:0 14px 14px 0}
.reeks-intro .label{color:var(--thema)}
.reeks-intro p{margin:8px 0 0;font-size:15px;color:var(--muted)}

/* home: subtiel oranje terug, als warm tegenwicht voor het groen */
.home .laag.l3{background:var(--oranje);opacity:.14}
.home .rimpel ellipse{stroke:var(--oranje);opacity:.45}
.home .spiraal-blok{border-top-color:rgba(210,86,31,.25)}
.home .quote p::before{content:"";display:block;width:36px;height:2px;border-radius:2px;background:var(--oranje);margin:0 0 18px}
.home .quote .label{color:var(--oranje)}
@media (max-width:760px){.home .quote p::before{margin:0 auto 18px}}

/* ===== nachtversie (gebaseerd op ontwerp B · Nachtwater) ===== */
html[data-thema="nacht"]{--bg:#1C1A17;--ink:#F1EDE1;--espresso:#F1EDE1;--muted:#B8AE9C;--line:rgba(241,237,225,.14);color-scheme:dark}
html[data-thema="nacht"] .laag.l1{background:var(--kobalt);opacity:.5}
html[data-thema="nacht"] .laag.l2{background:var(--rood);opacity:.32}
html[data-thema="nacht"] .laag.l3{background:var(--salie);opacity:.18}
html[data-thema="nacht"] .home .laag.l3{background:var(--oranje);opacity:.2}
html[data-thema="nacht"] .stroom{opacity:.28}
html[data-thema="nacht"] .keuze,html[data-thema="nacht"] .filter{background:rgba(28,26,23,.55)}
html[data-thema="nacht"] .kaart .vorm{background:#2A2622}
html[data-thema="nacht"] .invullen,html[data-thema="nacht"] .reeks-intro,html[data-thema="nacht"] .post a.volgende{background:rgba(28,26,23,.6)}
html[data-thema="nacht"] .pieker-knop,html[data-thema="nacht"] .thema-pil,html[data-thema="nacht"] .post a.thema-pil{color:#F1EDE1}
html[data-thema="nacht"] .pieker-knop::before{background:#F1EDE1}
html[data-thema="nacht"] dialog::backdrop{background:rgba(0,0,0,.55)}
html[data-thema="nacht"] .spiraal-knop:hover .spiraal-vorm{background:var(--oranje)}

/* dag/nacht-knop */
.thema-knop{font:inherit;font-size:14px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.thema-knop:hover{color:var(--ink);border-color:var(--ink)}
.thema-knop:focus-visible{outline:1px dotted var(--ink);outline-offset:3px}
.thema-knop svg{width:14px;height:14px}
nav{align-items:center}

/* vloeiende overgang tussen dag en nacht (alleen tijdens het wisselen) */
html.thema-wissel body,html.thema-wissel body *,html.thema-wissel body *::before{transition:background-color 3.2s cubic-bezier(.45,0,.25,1),color 3.2s cubic-bezier(.45,0,.25,1),border-color 3.2s cubic-bezier(.45,0,.25,1),stroke 3.2s ease,fill 3.2s ease,opacity 3.2s ease!important}
html.thema-wissel .laag{transition:background-color 4s ease,opacity 4s ease!important}
@media (prefers-reduced-motion:reduce){html.thema-wissel body *{transition:none!important}}


/* ===== proeven voor de achtergrond van home ===== */
.korrel{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.2;background-repeat:repeat;background-size:120px;-webkit-mask:radial-gradient(70% 65% at 45% 45%,transparent 30%,#000 90%);mask:radial-gradient(70% 65% at 45% 45%,transparent 30%,#000 90%)}
.achter{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}
.vlekken{position:fixed;height:100%}
.var-riso .laag,.var-lijnen .laag{opacity:.08!important}
.var-riso .riso{opacity:.62}
.var-lijnen .stroom,.var-lijnen .rimpel svg{display:none}
.var-lijnen .lijnen{opacity:.6;-webkit-mask:linear-gradient(90deg,transparent 42%,#000 62%);mask:linear-gradient(90deg,transparent 42%,#000 62%)}
.var-vlekken .stroom{opacity:.22}
@media (max-width:760px){.var-riso .riso{opacity:.32}.var-lijnen .lijnen{opacity:.35;-webkit-mask:none;mask:none}}
html[data-thema="nacht"] .korrel{opacity:.25;filter:invert(1)}


/* proef 4: zachte vlekken + waterrimpels */
.var-combi .laag{opacity:.08!important}
.var-combi .stroom,.var-combi .rimpel svg{display:none}
.var-combi .vlekken{opacity:.5}
.var-combi .lijnen{opacity:.42;-webkit-mask:linear-gradient(90deg,transparent 42%,#000 62%);mask:linear-gradient(90deg,transparent 42%,#000 62%)}
@media (max-width:760px){.var-combi .vlekken{opacity:.38}.var-combi .lijnen{opacity:.28;-webkit-mask:none;mask:none}}

/* proef 2 bijgewerkt: salie blijft zichtbaar naast de vlekken */
.var-vlekken .laag.l1{background:var(--salie);opacity:.34!important;top:-60px;right:auto;left:30%}
.var-vlekken .laag.l2{background:var(--salie);opacity:.28!important}
.var-vlekken.home .laag.l3{background:var(--matcha);opacity:.26!important;top:48%;right:20%}
html[data-thema="nacht"] .var-vlekken .laag.l1{background:var(--kobalt);opacity:.4!important}
html[data-thema="nacht"] .var-vlekken.home .laag.l3{background:var(--salie);opacity:.2!important}
/* oranje lijn onder de onderwerpen: loopt rechts zacht weg, zodat hij nooit over een vlek gaat */
.home .spiraal-blok{border-top:0;position:relative}
.home .spiraal-blok::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(210,86,31,.4),rgba(210,86,31,.25) 45%,transparent 80%)}

/* zonsondergang en zonsopkomst tijdens het wisselen */
.zon-overgang{position:fixed;inset:-60% 0;z-index:5;pointer-events:none;mix-blend-mode:multiply}
.zon-overgang.onder{background:linear-gradient(180deg,rgba(232,146,58,0) 0%,rgba(232,146,58,.45) 30%,rgba(210,86,31,.5) 45%,rgba(120,40,60,.45) 58%,rgba(4,33,121,.35) 72%,rgba(28,26,23,0) 100%);animation:zakt 3.6s cubic-bezier(.45,0,.25,1) forwards}
.zon-overgang.op{mix-blend-mode:screen;background:linear-gradient(0deg,rgba(4,33,121,0) 0%,rgba(4,33,121,.25) 25%,rgba(210,86,31,.35) 45%,rgba(232,146,58,.45) 60%,rgba(241,237,225,.3) 78%,rgba(241,237,225,0) 100%);animation:stijgt 3.6s cubic-bezier(.45,0,.25,1) forwards}
@keyframes zakt{0%{transform:translateY(-70%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(70%);opacity:0}}
@keyframes stijgt{0%{transform:translateY(70%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-70%);opacity:0}}
@media (prefers-reduced-motion:reduce){.zon-overgang{display:none}}

/* vloeiend wisselen tussen pagina's: zachtjes uitvagen en weer opkomen */
@keyframes opkomen{from{opacity:0}to{opacity:1}}
body{animation:opkomen .7s ease both}
html.weg body{opacity:0;transition:opacity .45s ease}
html.weg .vlekken,html.weg .korrel{opacity:0!important;transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){body{animation:none}html.weg body{transition:none}}

/* vlekken: kleur per onderwerp, loopt vloeiend over */
:root{--vlek:#2A221E;--gloed:#D2561F}
html[data-thema="nacht"]{--vlek:#0F0E0C}
/* de vlek zelf blijft donker, alleen de gloed eromheen krijgt de kleur van het thema */
body[data-onderwerp="existentieel"]{--gloed:#2A4FD1}
body[data-onderwerp="mental-health"]{--gloed:#8A9A62}
body[data-onderwerp="random-feitjes"]{--gloed:#D2561F}
body[data-onderwerp="eten-drinken"]{--gloed:#9C1A17}
/* op de themapagina's dezelfde sobere stippellijnen als op home */
.blog-pagina .stroom{position:absolute;top:140px;height:520px;opacity:.35}
.blog-pagina .stroom path{stroke:var(--espresso)!important;stroke-width:.5}
#v-donker{fill:var(--vlek);transition:fill 2.4s ease}
#v-gloed{fill:var(--gloed);transition:fill 2.4s ease}
.blog-pagina .vlekken{opacity:.9}
.blog-pagina .korrel{opacity:.3}

/* vloeiend overlopen tussen pagina's (browsers die dit kennen) */
@media (min-width:761px){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.9s;animation-timing-function:ease}
.vlekken{view-transition-name:vlekken}
::view-transition-group(vlekken){animation-duration:1.4s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* blogkaarten zonder cover: rustig, typografisch */
.posts{gap:0 48px}
.kaart{padding:28px 0 30px;border-top:1px solid var(--line);gap:12px;position:relative}
.kaart-label{display:flex;align-items:center;gap:10px}
.kaart-label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--kleur);flex:none}
.kaart h2{font-size:clamp(24px,2.4vw,30px);line-height:1.18;margin:0;transition:color .4s ease}
.kaart p{max-width:46ch}
.kaart-verder{font-size:13px;letter-spacing:.08em;color:var(--muted);display:inline-flex;align-items:center;gap:8px;margin-top:2px}
.kaart-verder::after{content:"";width:22px;height:1px;background:var(--kleur);transition:width .4s ease}
.kaart::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--kleur);transition:width .6s ease}
.kaart:hover::before{width:64px}
.kaart:hover .kaart-verder::after{width:44px}
.kaart:hover h2{color:var(--kleur)}
html[data-thema="nacht"] .kaart:hover h2{color:var(--ink)}

/* onderwerpknoppen op home: raster van 4 gelijke vakken (op de telefoon 2 bij 2) */
@media (max-width:760px){
  .home .keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home .keuze{justify-content:center;text-align:center;font-size:15px;padding:16px 10px;border-radius:22px;min-height:64px}
}

/* telefoon: lichter voor de processor, zodat alles vloeiend blijft */
@media (max-width:760px){
  /* zachte vlekken: geen bewegende blur maar een vaste kleurverloop-achtergrond */
  .laag{display:none}
  /* zachte kleurvlekken: deel van de pagina zelf, zodat ze ook onder de balken van Safari doorlopen */
  html,body{background-color:var(--bg)}
  body{background-image:radial-gradient(70% 420px at 92% 0,rgba(138,154,98,.32),transparent 70%),radial-gradient(60% 380px at 8% 620px,rgba(179,192,106,.2),transparent 70%),radial-gradient(70% 420px at 90% 1150px,rgba(138,154,98,.26),transparent 70%),radial-gradient(60% 380px at 10% 1700px,rgba(232,146,58,.12),transparent 70%);background-size:100% 2000px;background-repeat:repeat-y}
  html[data-thema="nacht"] body{background-image:radial-gradient(70% 420px at 92% 0,rgba(4,33,121,.45),transparent 70%),radial-gradient(60% 380px at 8% 620px,rgba(156,26,23,.24),transparent 70%),radial-gradient(70% 420px at 90% 1150px,rgba(4,33,121,.35),transparent 70%),radial-gradient(60% 380px at 10% 1700px,rgba(210,86,31,.16),transparent 70%)}
  .keuze,.filter{backdrop-filter:none}
  /* vlekken één keer getekend, daarna zacht laten deinen met CSS */
  .vlekken{display:none}
  .vlekken-plaat{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;object-fit:cover;object-position:right center;pointer-events:none;z-index:1;transform:translateZ(0)}
  .korrel{display:none}
  .rimpel svg{animation:none}
  .stroom path{transition:none}
}
@keyframes deinen{0%{transform:scale(2) translate(0,0)}100%{transform:scale(2) translate(-4px,14px)}}

/* telefoon: kortere dag/nacht-overgang en snellere spiraal */
@media (max-width:760px){
  html.thema-wissel body,html.thema-wissel body *,html.thema-wissel body *::before{transition:background-color 1.1s ease,color 1.1s ease,border-color 1.1s ease,opacity 1.1s ease!important}
  html.thema-wissel .laag{transition:background-color 1.2s ease,opacity 1.2s ease!important}
  .zon-overgang.onder,.zon-overgang.op{animation-duration:1.4s}
  .spiraal-vorm{transition-duration:1.4s}
  .spiraal-kant .rimpel{width:min(300px,78vw)}
  .spiraal-blok{padding-bottom:60px;gap:12px}
}

/* ===== smartphone ===== */
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  header{padding:18px 0 6px;row-gap:10px}
  .logo img{width:34px;height:34px}
  .logo span{font-size:13px}
  nav{gap:20px}
  .thema-knop{padding:7px 10px}
  .thema-knop span{display:none}
  /* piekerknop: klein en rond, en even weg als je naar beneden leest */
  .pieker-knop{right:14px;bottom:14px;font-size:13.5px;padding:11px 16px;gap:8px;box-shadow:0 6px 18px rgba(28,26,23,.22);transition:transform .35s ease,opacity .35s ease}
  .pieker-knop::before{width:7px;height:7px}
  .pieker-knop.verstopt{transform:translateY(90px);opacity:0}
  /* filters op de blogpagina: één rij die je opzij kunt schuiven */
  /* onderwerpen op de blogpagina: raster van 2 naast elkaar, "Alles" over de hele breedte */
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 32px}
  .filter{justify-content:center;text-align:center;padding:13px 8px;border-radius:22px;font-size:13.5px;gap:7px;white-space:nowrap;line-height:1.2}
  .filter::before{width:8px;height:8px}
  .filter:last-child{grid-column:1 / -1}
  .blog-kop{padding:40px 0 24px}
  .post{padding:40px 0 90px}
  .post h1{margin:16px 0 28px}
  footer{padding-bottom:90px}
  .korrel{opacity:.14}
}

/* leesbalkje bovenin een blog */
.leesbalk{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--thema,var(--oranje));transform-origin:0 50%;transform:scaleX(0);z-index:20;pointer-events:none}

@media (max-width:760px){body{animation-duration:.35s}html.weg body{transition-duration:.2s}}

/* iPhone: achtergrond loopt door onder de balken van Safari, en vervaagt daar naar de papierkleur */
header{padding-top:max(28px,env(safe-area-inset-top))}
.pieker-knop{bottom:max(20px,env(safe-area-inset-bottom))}
@media (max-width:760px){
  header{padding-top:max(18px,calc(env(safe-area-inset-top) + 6px))}
  .pieker-knop{bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px))}
  .vlekken-plaat{top:-15vh;height:130vh;height:130lvh;object-fit:fill}
}

/* dag/nacht: tekst wisselt snel van kleur, zodat alles leesbaar blijft tijdens de overgang */
html.thema-wissel body,html.thema-wissel body *{transition-property:background-color,color,border-color,stroke,fill,opacity!important}
html.thema-wissel body *{transition-duration:3.2s,.5s,3.2s,3.2s,3.2s,3.2s!important}
/* geselecteerde knoppen (bijv. "Alles") wisselen in één keer: achtergrond en tekst tegelijk */
html.thema-wissel .filter[aria-pressed="true"],html.thema-wissel .knop,html.thema-wissel .thema-pil{transition:none!important}
@media (max-width:760px){
  html.thema-wissel body *{transition-duration:1s,.2s,1s,1s,1s,1s!important}
}
/* nachtversie: geselecteerd onderwerp blijft goed leesbaar (licht vlak, donkere tekst) */
html[data-thema="nacht"] .filter[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-thema="nacht"] .filter[aria-pressed="true"]::before{background:var(--kleur,var(--bg))}