/*
Opmaak voor /een-overlijden/ (page-een-overlijden.php).
Bovenop assets/home.css: palet, fonts, .wrap, .btn en de kop/voet komen daar
vandaan. Alles hieronder staat onder .eo zodat het niet botst met home.css
(die o.a. een eigen .step kent en sitebreed meelaadt).
Port van werk/04-archief/fase4-ontwerp/f4s2-sjabloon-een-overlijden-design-2026-08-11.html.
DIT BESTAND IS DE BASIS EN DE DESKTOPWEERGAVE. De breekpunten staan sinds
2026-08-14 apart in eenoverlijden-mobiel.css, dat hierna laadt. Daar staat ook
een register per sectie. Uitzondering: de omslag van de tijdlijn op 820px
hieronder blijft hier, want dat is de omslag van twee kolommen naar één en
niet een afstelling.
De mobiele hero staat in géén van beide bestanden maar in home.css: .hero is
een sitebrede component die ook de voorpagina gebruikt. Zoek daar op
"HERO OP EEN TELEFOON".
*/
/* ---------- kruimelpad + hero (zelfde opzet als de homepage) ----------
De .hero-klassen komen uit home.css (sitebreed). Hier alleen het kruimelpad
en het eigen hero-beeld (webp) als achtergrond van .ph. */
.eo .crumbs{font-size:12.5px;color:var(--ink-mist);letter-spacing:.03em}
.eo .crumbs a:hover{color:var(--aubergine)}
.eo .crumbs .sep{margin:0 9px;opacity:.6}
.eo .crumbs .here{color:var(--ink-soft)}
/* zonder eyebrow draagt het kruimelpad de ruimte boven de h1 */
.eo .hero .crumbs{display:block;margin-bottom:26px}
.eo .hero .ph{background-image:url("img/hero-een-overlijden.webp");background-position:center}
/* =====================================================================
DE WEG DIE WE SAMEN LOPEN — de tijdlijn
===================================================================== */
/* overflow:hidden is geen opmaak maar een noodzaak: .b1 hieronder is 520px breed
en staat op right:-160px. Zonder deze regel werd het document op een scherm van
390px 551px breed. Dat verbergt html{overflow-x:clip} wel voor het oog, maar
het houdt het document niet smal, en Safari schaalt de hele pagina dan terug
tot alles past. Elke sectie met een blob hoort dit te hebben; op 2026-08-14 was
dit de laatste van de site die het niet had. */
.eo .weg{position:relative;overflow:hidden;padding:76px 0 90px;margin-top:26px}
/* Deze sectie had blur(80px); de gemeten uitloop daarvan is 154px. */
.eo .weg .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;--bol-uitloop:154px}
@supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
.eo .weg .blob{ filter:none; -webkit-mask-image:radial-gradient(circle,#000 0,#000 calc(var(--kern) - var(--bol-uitloop)),rgba(0,0,0,.853) calc(var(--kern) - var(--bol-uitloop) * .62),rgba(0,0,0,.664) calc(var(--kern) - var(--bol-uitloop) * .31),rgba(0,0,0,.431) var(--kern),rgba(0,0,0,.224) calc(var(--kern) + var(--bol-uitloop) * .31),rgba(0,0,0,.078) calc(var(--kern) + var(--bol-uitloop) * .62),transparent calc(var(--kern) + var(--bol-uitloop))); mask-image:radial-gradient(circle,#000 0,#000 calc(var(--kern) - var(--bol-uitloop)),rgba(0,0,0,.853) calc(var(--kern) - var(--bol-uitloop) * .62),rgba(0,0,0,.664) calc(var(--kern) - var(--bol-uitloop) * .31),rgba(0,0,0,.431) var(--kern),rgba(0,0,0,.224) calc(var(--kern) + var(--bol-uitloop) * .31),rgba(0,0,0,.078) calc(var(--kern) + var(--bol-uitloop) * .62),transparent calc(var(--kern) + var(--bol-uitloop))) }
}
.eo .weg .b1{--kern:260px;width:828px;height:828px;background:var(--aubergine-mist);top:-234px;right:-314px}
.eo .weg .b2{--kern:230px;width:768px;height:768px;background:var(--teal-mist);bottom:-194px;left:-334px;opacity:.4}
.eo .weg .kop{position:relative;text-align:center;max-width:660px;margin:0 auto 62px}
.eo .weg .label{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.eo .weg .label .leaf{width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:.7}
.eo .weg h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1.1;color:var(--aubergine-deep);margin-top:14px}
.eo .weg h2 em{font-style:italic;color:var(--aubergine)}
.eo .weg .sub{margin-top:16px;font-size:16.5px;color:var(--ink-soft)}
.eo .track{position:relative;max-width:980px;margin:0 auto}
.eo .track::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,transparent,rgba(74,52,97,.22) 8%,rgba(74,52,97,.22) 92%,transparent)}
.eo .eo-step{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;margin:0 0 54px}
.eo .eo-step:last-child{margin-bottom:0}
.eo .eo-step > .media,.eo .eo-step > .tekst{grid-row:1;min-width:0;padding:6px 0}
.eo .eo-step > .tekst{max-width:430px}
/* oneven: foto links, tekst rechts — even: gespiegeld. Tekst altijd links
uitgelijnd en dicht bij de foto (hugt de middenlijn). */
.eo .eo-step:nth-child(odd) > .media{grid-column:1}
.eo .eo-step:nth-child(odd) > .tekst{grid-column:3;text-align:left;margin-right:auto;padding-left:30px}
.eo .eo-step:nth-child(even) > .media{grid-column:3}
.eo .eo-step:nth-child(even) > .tekst{grid-column:1;text-align:left;margin-left:auto;padding-right:30px}
/* klein, zacht puntje op de lijn (geen nummers) */
.eo .eo-step > .node{grid-column:2;grid-row:1;justify-self:center;width:8px;height:8px;border-radius:50%;background:var(--aubergine-soft);box-shadow:0 0 0 5px var(--paper),0 0 0 6px rgba(74,52,97,.13);position:relative;z-index:2}
.eo .eo-step h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:29px;line-height:1.14;color:var(--aubergine-deep)}
.eo .eo-step p{margin-top:14px;font-size:15.5px;line-height:1.72;color:var(--aubergine)}
.eo .eo-step .meer{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:11px 24px;border-radius:999px;border:1px solid rgba(74,52,97,.22);background:rgba(255,255,255,.45);color:var(--aubergine);font-size:13px;letter-spacing:.01em;transition:background-color .35s var(--ease-soft),border-color .35s var(--ease-soft),transform .35s var(--ease-soft)}
.eo .eo-step .meer:hover{border-color:var(--aubergine);background:rgba(74,52,97,.05);transform:translateY(-1px)}
.eo .eo-step .meer .arr{display:inline-block;transition:transform .35s var(--ease-soft)}
.eo .eo-step .meer:hover .arr{transform:translateX(4px)}
/* fotoframe: organische 'blob'-vorm zoals de homepage-hero */
.eo .frame{position:relative;overflow:hidden;aspect-ratio:1/1;max-width:360px;border-radius:60% 40% 55% 45% / 50% 58% 42% 50%;background:radial-gradient(circle at 32% 28%, #ffffff, var(--aubergine-mist) 46%, #dcc8e0 88%);box-shadow:0 46px 80px -48px rgba(74,52,97,.4), inset 0 0 0 12px rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center}
.eo .eo-step:nth-child(odd) > .media > .frame{margin-left:auto}
.eo .eo-step:nth-child(even) > .media > .frame{margin-right:auto}
.eo .eo-step:nth-child(even) .frame{border-radius:44% 56% 46% 54% / 56% 44% 58% 42%}
.eo .frame span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(74,52,97,.5)}
.eo .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* reveal-on-scroll */
.eo .eo-step > .media,.eo .eo-step > .tekst{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.eo .eo-step.is-in > .media{opacity:1;transform:none}
.eo .eo-step.is-in > .tekst{opacity:1;transform:none;transition-delay:.12s}
.eo .eo-step > .node{opacity:0;transform:scale(.6);transition:opacity .7s var(--ease-soft),transform .7s cubic-bezier(.2,.9,.3,1.3)}
.eo .eo-step.is-in > .node{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.eo .eo-step > .media,.eo .eo-step > .tekst,.eo .eo-step > .node{opacity:1 !important;transform:none !important;transition:none}
}
/* mobiel: alles op een linkerlijn, foto boven tekst */
@media (max-width:820px){
.eo .track{max-width:520px}
.eo .track::before{left:31px}
.eo .eo-step{grid-template-columns:62px 1fr;column-gap:20px;align-items:start;margin-bottom:44px}
.eo .eo-step > .node{grid-column:1;grid-row:1;justify-self:center;margin-top:9px;width:8px;height:8px;box-shadow:0 0 0 5px var(--paper),0 0 0 6px rgba(74,52,97,.13)}
.eo .eo-step:nth-child(odd) > .media,.eo .eo-step:nth-child(even) > .media{grid-column:2;grid-row:1;padding:0;margin-bottom:16px;text-align:left}
.eo .eo-step:nth-child(odd) > .media > .frame,.eo .eo-step:nth-child(even) > .media > .frame{margin:0}
.eo .eo-step:nth-child(odd) > .tekst,.eo .eo-step:nth-child(even) > .tekst{grid-column:2;grid-row:2;padding:0;text-align:left;margin:0;max-width:none}
}
/* ---------- wat als de situatie anders is (aangeleverd ontwerp, ruw/UVE) ----------
Zelfstandig blok onder .erika-anders; tokens uit home.css met fallbacks. */
.erika-anders{position:relative;overflow:hidden;background:var(--paper,#faf5ec);padding:150px 44px 160px;font-family:var(--font-body,"Inter",system-ui,sans-serif)}
.erika-anders__glow,.erika-anders__blob{position:absolute;pointer-events:none}
.erika-anders__glow{inset:0;background:
radial-gradient(900px 520px at 12% 8%, rgba(232,222,240,.55), transparent 70%),
radial-gradient(1000px 600px at 88% 92%, rgba(216,228,223,.45), transparent 72%)}
.erika-anders__blob{border-radius:50%;filter:blur(70px)}
@supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
.erika-anders__blob{ filter:none; -webkit-mask-image:radial-gradient(circle,#000 0,#000 calc(var(--kern) - var(--bol-uitloop)),rgba(0,0,0,.853) calc(var(--kern) - var(--bol-uitloop) * .62),rgba(0,0,0,.664) calc(var(--kern) - var(--bol-uitloop) * .31),rgba(0,0,0,.431) var(--kern),rgba(0,0,0,.224) calc(var(--kern) + var(--bol-uitloop) * .31),rgba(0,0,0,.078) calc(var(--kern) + var(--bol-uitloop) * .62),transparent calc(var(--kern) + var(--bol-uitloop))); mask-image:radial-gradient(circle,#000 0,#000 calc(var(--kern) - var(--bol-uitloop)),rgba(0,0,0,.853) calc(var(--kern) - var(--bol-uitloop) * .62),rgba(0,0,0,.664) calc(var(--kern) - var(--bol-uitloop) * .31),rgba(0,0,0,.431) var(--kern),rgba(0,0,0,.224) calc(var(--kern) + var(--bol-uitloop) * .31),rgba(0,0,0,.078) calc(var(--kern) + var(--bol-uitloop) * .62),transparent calc(var(--kern) + var(--bol-uitloop))) }
}
.erika-anders__blob--a{--kern:210px;width:690px;height:690px;left:-225px;top:45px;background:var(--lila-light,#f0e6f5);opacity:.5;animation:erika-anders-drift 22s ease-in-out infinite}
.erika-anders__blob--b{--kern:180px;width:630px;height:630px;right:-205px;bottom:-75px;background:var(--sage-light,#eaf3ee);opacity:.55;animation:erika-anders-drift2 26s ease-in-out infinite}
.erika-anders__inner{position:relative;max-width:1180px;margin:0 auto}
.erika-anders__head{text-align:center;margin:0 auto 74px}
.erika-anders__title{font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);font-weight:400;margin:0 auto;
font-size:clamp(38px,4.4vw,60px);line-height:1.06;letter-spacing:var(--tracking-display,-.012em);
color:var(--aubergine,#4a3461);max-width:16em;text-wrap:pretty}
.erika-anders__title em{font-style:italic;color:var(--teal,#3a6b62)}
.erika-anders__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(46%,300px),1fr));gap:40px}
/* geen icoon meer: de kop is de drager van de kaart */
.erika-anders__card{display:block;padding:44px 44px 46px;
background:var(--surface-card,rgba(255,255,255,.55));
border-radius:var(--radius-petal,38px 28px 38px 28px);
box-shadow:var(--shadow-card,0 30px 60px -40px rgba(74,52,97,.18));
animation:erika-anders-float 12s ease-in-out infinite;
transition:transform .55s cubic-bezier(.22,.61,.36,1),background .4s var(--ease-soft),box-shadow .5s cubic-bezier(.22,.61,.36,1)}
.erika-anders__card:nth-child(2n){border-radius:var(--radius-petal-alt,28px 38px 28px 38px)}
.erika-anders__card:nth-child(1){animation-duration:11s;animation-delay:0s}
.erika-anders__card:nth-child(2){animation-duration:13s;animation-delay:-3.5s}
.erika-anders__card:nth-child(3){animation-duration:12s;animation-delay:-6s}
.erika-anders__card:nth-child(4){animation-duration:14s;animation-delay:-9s}
.erika-anders__card:hover{background:var(--surface-card-hover,rgba(255,255,255,.85));
transform:translateY(-4px);box-shadow:var(--shadow-card-hover,0 40px 80px -40px rgba(74,52,97,.26));
animation-play-state:paused}
.erika-anders__card h3{font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);font-style:italic;font-weight:500;
font-size:clamp(26px,2.3vw,32px);line-height:1.16;letter-spacing:-.008em;color:var(--aubergine,#4a3461);
margin:0 0 16px;text-wrap:pretty}
.erika-anders__card p{margin:0;font-size:15.5px;line-height:1.82;font-weight:300;color:var(--ink-soft,#5a5060);text-wrap:pretty}
/* interne link in lopende tekst: uitsluitend cursief, verder gelijk aan de zin */
.erika-anders__card p a{font-family:inherit;font-size:inherit;font-style:italic;
color:inherit;text-decoration:none}
.erika-anders__card p a:hover{color:var(--aubergine,#4a3461)}
@keyframes erika-anders-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes erika-anders-drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-18px) rotate(2deg)}}
@keyframes erika-anders-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,12px) scale(1.04)}}
@media (max-width:900px){
.erika-anders{padding:110px 24px 120px}
.erika-anders__head{margin-bottom:54px}
.erika-anders__grid{gap:26px}
.erika-anders__card{padding:34px 30px 36px}
.erika-anders__card h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
.erika-anders__card,.erika-anders__blob{animation:none}
}
/* ---------- FAQ ---------- */
/* position en overflow erbij op 2026-08-31: deze sectie kreeg bollen en die
hebben een positioneringscontext nodig. Zonder overflow:hidden steekt een bol
buiten het scherm en schaalt Safari de hele pagina terug; dit was de laatste
sectie van de site zonder. */
.eo .faq{padding:24px 0 84px;position:relative;overflow:hidden}
.eo .faq .head{max-width:660px;margin:0 auto 30px;text-align:center}
.eo .faq h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(28px,4vw,42px);color:var(--aubergine-deep)}
.eo .faq h2 em{font-style:italic;color:var(--aubergine)}
.eo .faq-list{max-width:820px;margin:0 auto}
.eo .faq-item{border-bottom:1px solid rgba(74,52,97,.14)}
.eo .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--aubergine-deep)}
.eo .faq-item summary::-webkit-details-marker{display:none}
.eo .faq-item .chev{flex:none;width:22px;height:22px;position:relative}
.eo .faq-item .chev::before,.eo .faq-item .chev::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;background:var(--aubergine);border-radius:2px;transition:transform .3s var(--ease-soft)}
.eo .faq-item .chev::before{transform:translate(-50%,-50%)}
.eo .faq-item .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.eo .faq-item[open] .chev::after{transform:translate(-50%,-50%) rotate(0)}
.eo .faq-item .a{padding:0 4px 24px;max-width:720px}
.eo .faq-item .a p{font-size:15.5px;color:var(--ink-soft)}
.eo .faq-item[open] .a{animation:eo-fade-in .5s ease}
@keyframes eo-fade-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- BEL-ACTIE (CTA-band): groene golfband zoals de plaatspagina ---------- */
.eo .cta-band{position:relative;padding:150px 0 130px;color:#eaf3ee;overflow:hidden;background:radial-gradient(1000px 420px at 50% 6%, rgba(90,138,128,.5), transparent 60%),linear-gradient(170deg, var(--teal-deep) 0%, #24463f 62%, #2a4f48 100%)}
.eo .cta-band::before{content:"";position:absolute;left:0;right:0;top:-1px;height:120px;pointer-events:none;z-index:2;background:var(--paper);-webkit-mask:url("data:image/svg+xml;utf8,") top center / 100% 100% no-repeat;mask:url("data:image/svg+xml;utf8,") top center / 100% 100% no-repeat}
.eo .cta-band .blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
@supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
.eo .cta-band .blob{ filter:none; -webkit-mask-image:radial-gradient(circle,#000 0,#000 calc(var(--kern) - var(--bol-uitloop)),rgba(0,0,0,.853) calc(var(--kern) - var(--bol-uitloop) * .62),rgba(0,0,0,.664) calc(var(--kern) - var(--bol-uitloop) * .31),rgba(0,0,0,.431) var(--kern),rgba(0,0,0,.224) calc(var(--kern) + var(--bol-uitloop) * .31),rgba(0,0,0,.078) calc(var(--kern) + var(--bol-uitloop) * .62),transparent calc(var(--kern) + var(--bol-uitloop))); mask-image:radial-gradient(circle,#000 0,#000 calc(var(--kern) - var(--bol-uitloop)),rgba(0,0,0,.853) calc(var(--kern) - var(--bol-uitloop) * .62),rgba(0,0,0,.664) calc(var(--kern) - var(--bol-uitloop) * .31),rgba(0,0,0,.431) var(--kern),rgba(0,0,0,.224) calc(var(--kern) + var(--bol-uitloop) * .31),rgba(0,0,0,.078) calc(var(--kern) + var(--bol-uitloop) * .62),transparent calc(var(--kern) + var(--bol-uitloop))) }
}
.eo .cta-band .blob.b1{--kern:260px;z-index:0;width:790px;height:790px;background:#5a8a80;top:-175px;left:-275px;opacity:.4;animation:drift 22s ease-in-out infinite}
.eo .cta-band .blob.b2{--kern:200px;z-index:0;width:670px;height:670px;background:#1f3f3a;bottom:-255px;right:-245px;opacity:.35;animation:drift2 26s ease-in-out infinite}
.eo .cta-band .wrap{position:relative;z-index:3;text-align:center;max-width:820px}
.eo .cta-band .badge{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);padding:9px 18px;border-radius:999px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:30px;font-weight:400}
.eo .cta-band .badge .dot{width:8px;height:8px;border-radius:50%;background:#b8d4ca;box-shadow:0 0 0 5px rgba(184,212,202,.18);animation:pulse-soft 3s ease-in-out infinite}
.eo .cta-band h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(34px,4.4vw,54px);line-height:1.08;color:#fff;margin-bottom:22px;letter-spacing:-.01em}
.eo .cta-band h2 em{font-style:italic;color:#b8d4ca}
.eo .cta-band p{font-size:16px;line-height:1.85;color:#cfdfd9;font-weight:300;max-width:520px;margin:0 auto 40px}
.eo .cta-band .num{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,5vw,58px);color:#fff;font-weight:500;display:inline-block;letter-spacing:.01em;line-height:1.1;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:6px;transition:border-color .35s var(--ease-soft)}
.eo .cta-band .num:hover{border-bottom-color:#fff}
.eo .cta-band .nots{display:block;margin-top:16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#eef5f2;font-weight:500} /* was 11px #b8d4ca, slecht leesbaar op groen (Erika, 2026-10-30) */
.eo .cta-band .alt{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* mobiel: zie eenoverlijden-mobiel.css, sectie 5 */
/* de voetgolf draagt het teal van de bel-actie het aubergine in (alleen deze pagina) */
footer::before{background:#2a4f48}
footer{padding-top:90px}
/* interne links: uitsluitend cursief, geen onderstreping of aparte kleur (gouden regel) */
.eo a.inl{color:inherit;font-style:italic}
.eo a.inl em{font-style:italic}
/* =====================================================================
DE NADEN TUSSEN DE SECTIES
Zelfde aanpak als watwijdoen.css, waar alle vier de naden op 0,0 staan.
Elke sectie hier draagt radiale waas of een blob met blur, en de sectie
ernaast draagt een ándere. Waar die twee elkaar raken staat een streep. Op
2026-08-14 gemeten op /een-overlijden/, vóór deze regels:
hero -> weg 10,4 (390) 8,4 (1280)
weg -> anders is 10,0 5,2
anders is -> vragen 18,3 11,3 HARDE STREEP
vragen -> bel-band 0,0 0,0 (die golf klopte al)
bel-band -> voet 12,2 15,8 HARDE STREEP
Oplossing: de rand waar de naad valt over de laatste 120px laten uitdoven
naar de kale grondkleur, precies de kleur die de sectie ernaast daar heeft.
De laatste 22% is vlak; loopt het verloop door tot op de rand, dan verschilt
de laatste beeldrij nog één eenheid van de eerste rij eronder en haalt dat de
meting eruit terwijl het oog het niet ziet.
Nulkleuren staan als rgba(...,0) van dezelfde kleur en niet als transparent:
transparent is doorzichtig zwart en verloopt in sommige browsers grijzig.
z-index 1 op de uitdoving, dus boven de blobs en de waas. De inhoud van de
secties gaat daarom expliciet naar 3; zonder die regel is .wrap een gewoon
blok zonder positie en schildert de uitdoving eroverheen.
Uitzondering: de hero. Daar staat .hero .wrap al op z-index 1 (home.css) en
die maat is sitebreed; hem hier optillen zou de homepage raken. De uitdoving
van de hero staat daarom op 0: nog steeds boven de blobs, die op auto staan
en eerder in de DOM, maar onder de inhoud. Op 1 waste hij de knop "Neem
contact op" half weg, precies zoals eerder bij .hero-uitdoof op de homepage.
===================================================================== */
.eo .weg .wrap,
.eo .faq .wrap{position:relative;z-index:3}
.erika-anders__inner{z-index:3}
.eo .hero::after,
.eo .weg::before,
.eo .weg::after,
.erika-anders::before,
.erika-anders::after,
.eo .cta-band::after{
content:"";position:absolute;left:0;right:0;height:120px;
pointer-events:none;z-index:1;
}
.eo .hero::after,
.eo .weg::after,
.erika-anders::after,
.eo .cta-band::after{bottom:0}
.eo .weg::before,
.erika-anders::before{top:0}
.eo .hero::after{z-index:0}
/* hero -> weg en weg -> anders is: alle drie staan op papier */
.eo .hero::after {background:linear-gradient(to bottom, rgba(250,245,236,0) 0%, #faf5ec 78%, #faf5ec 100%)}
.eo .weg::before {background:linear-gradient(to top, rgba(250,245,236,0) 0%, #faf5ec 78%, #faf5ec 100%)}
.eo .weg::after {background:linear-gradient(to bottom, rgba(250,245,236,0) 0%, #faf5ec 78%, #faf5ec 100%)}
.erika-anders::before {background:linear-gradient(to top, rgba(250,245,236,0) 0%, #faf5ec 78%, #faf5ec 100%)}
/* anders is -> vragen: de vragensectie heeft geen eigen achtergrond, dus papier */
.erika-anders::after {background:linear-gradient(to bottom, rgba(250,245,236,0) 0%, #faf5ec 78%, #faf5ec 100%)}
/* bel-band -> voet: de golf boven de voet is op deze pagina #2a4f48 (zie
footer::before hierboven). Het verloop van 170 graden in de band verkleurt
ook van links naar rechts, dus de onderrand is nergens precies die kleur. */
.eo .cta-band::after {background:linear-gradient(to bottom, rgba(42,79,72,0) 0%, #2a4f48 78%, #2a4f48 100%)}
/* Inline link in de alinea van de bel-band. De band zegt sinds 2026-09-09 ook
waar de overige vragen heen moeten, en dan hoort daar een link bij die je als
link ziet zonder dat hij de rust van de band breekt: geen eigen kleur, alleen
een onderstreping op afstand. */
.cta-band p a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color var(--dur-color) var(--ease-soft)}
.cta-band p a:hover{text-decoration-color:#fff}