:root{
    --aubergine:#4a3461;
    --aubergine-deep:#2f2042;
    --aubergine-soft:#6b5180;
    --aubergine-mist:#e8def0;
    /* De bovenbalk staat bewust lichter dan --aubergine-deep: hij moet zich van
       de kop én van een donkere hero losmaken. Dit is de paarse toon uit het
       logo. Wijzig je hem, controleer dan het contrast met wit (nu 8,7:1). */
    --topbar-paars:#6b3186;
    --topbar-paars-diep:#5a2872;
    --teal:#3a6b62;
    --teal-deep:#2a4f48;
    --teal-soft:#5a8a80;
    --teal-mist:#d8e4df;
    --cream:#f1e8d8;
    --cream-warm:#ebdfc8;
    --sage:#b8c4ad;
    --rose:#dcb5ae;
    --ink:#2a2330;
    --ink-soft:#5a5060;
    --ink-mist:#8a8090;
    --paper:#faf5ec;
    --paper-warm:#f6efe0;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-weight:300;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    letter-spacing:.005em;
  }
  /* Vangnet voor de volgende decoratie die buiten haar sectie steekt.
     Bewust clip en niet hidden: overflow:hidden op html maakt van het document
     een scrollcontainer en dan blijft de vastgezette navigatie niet meer boven
     hangen. overflow-x:clip knipt wel af maar maakt geen scrollcontainer, en
     laat overflow-y op visible staan. De oorzaak hoort in de sectie zelf
     opgelost te worden; dit is de bodem eronder.

     Let op: hier mag GEEN body{overflow-x:hidden} meer naast staan. Die regel
     stond hier tot 2026-08-14 en werkte zolang html op visible stond: dan
     propageert de waarde van body naar het kijkvenster. Zodra html zelf een
     waarde heeft, propageert die, en geldt de regel op body op body zélf. Body
     wordt dan de scrollport van de vastgezette navigatie, en een scrollport die
     niet scrolt laat sticky los. Gemeten met kopcontrole.cjs: "kop plakt op
     -900px". */
  html{overflow-x:clip}
  .serif{font-family:'Cormorant Garamond',serif;font-weight:400}
  /* Een link erft zijn kleur van de tekst eromheen; de site kleurt links waar
     dat hoort zelf, per onderdeel.

     Waarom hier `a:any-link` staat en niet alleen `a`:
     het moederthema zet `a{color:var(--global-palette-highlight)}` — het blauw
     #2b6cb0 — in global.min.css. Dat is even specifiek als een kale `a`, dus
     dan beslist de volgorde van de stylesheets, en die verschilt per pagina.
     De zelfvoorzienende sjablonen (/onze-zorg/, /contact/, /videos/ en de
     andere die hun eigen <head> schrijven) zetten home.css in de rij vóór
     global.min.css; op de homepage en /een-overlijden/ staat hij erna. Gemeten
     op 2026-08-14: het nummer in de bovenbalk was daardoor op de ene pagina wit
     en op de andere blauw, en het logo in de kop was een blauwe link.

     `a:any-link` telt als (0,1,1) tegen (0,0,1) voor een kale `a`. Daarmee wint
     deze regel altijd, ongeacht de volgorde.

     LET OP, en dit stond hier tot 2026-08-24 verkeerd: één klasse is NIET
     genoeg. `.mijn-knop{color:#fff}` telt (0,1,0) en verliest van deze regel,
     zonder foutmelding. De knop houdt dan gewoon de erfkleur. Dat is op
     2026-08-24 gemeten op twaalf regels tegelijk, waaronder de hele bel-band:
     het telefoonnummer stond in `--ink` op aubergine, contrast 1,41.
     Er bestaat geen specificiteit tussen (0,0,1) en (0,1,0), dus deze regel kan
     niet tegelijk Kadence verslaan en van onze eigen klassen verliezen.

     Schrijf een linkkleur daarom als `a.mijn-knop` (0,1,1) of met een ouder
     erbij. Nakijken kan met:

         python ruw\gereedschap\linkkleur.py

     die meldt elke kleurregel op een losse klasse die ook echt op een <a>
     staat. `color:inherit` wordt overgeslagen; dat doet deze regel al. */
  a,a:any-link{color:inherit}
  a{text-decoration:none}
  img{display:block;max-width:100%}
  ::selection{background:var(--aubergine-mist);color:var(--aubergine-deep)}

  /* gentle, slow universal motion */
  *{transition:color .4s var(--ease-soft), background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), opacity .4s var(--ease-soft)}

  /* ---------- layout ---------- */
  .wrap{max-width:1180px;margin:0 auto;padding:0 44px}
  @media (max-width:720px){.wrap{padding:0 24px}}

  /* ---------- soft floating motion ---------- */
  @keyframes drift {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    50%     { transform: translate(14px,-18px) rotate(2deg); }
  }
  @keyframes drift2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-22px,12px) scale(1.04); }
  }
  @keyframes breathe {
    0%,100% { opacity:.55; transform: scale(1); }
    50%     { opacity:.75; transform: scale(1.03); }
  }
  @keyframes pulse-soft {
    0%,100% { opacity:.85 }
    50%     { opacity:.45 }
  }

  /* ---------- ambient blobs (organic background atmospheres) ---------- */
  /* De blur blijft staan als terugval; het @supports-blok eronder vervangt hem
     door het masker uit fundament.css zodra de browser dat kan. Waarom: gemeten
     op 2026-09-10 kostte deze filter de homepage tweederde van zijn
     beeldsnelheid. Zie het kopblok in fundament.css. */
  .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;will-change:transform}
  @supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
    .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))) }
  }

  /* ---------- topbar: de bereikbaarheidsmelding ----------
     Eén mededeling, gecentreerd: dag en nacht bereikbaar, en het nummer. Dit is
     de belangrijkste regel van de site voor wie hier vannacht terechtkomt, dus
     staat hij vet en op een lichter paars dan de rest van de aubergine-familie.
     De oude balk liep op --aubergine-deep (#2f2042) en viel tegen de donkere
     hero weg; --topbar-paars is de kleur uit het logo en houdt op wit tekst een
     contrast van ruim 8:1.

     Twee schrijfwijzen in één balk: .tb-lang is de volle zin voor desktop,
     .tb-kort de korte vorm voor een telefoon. Welke er staat beslist het
     breekpunt onderaan dit bestand ("Kop en voet op een telefoon"); ze zijn
     nooit allebei zichtbaar. */
  .topbar{
    background:linear-gradient(180deg,var(--topbar-paars),var(--topbar-paars-diep));
    color:#fff;font-size:13px;letter-spacing:.02em;font-weight:600;
  }
  .topbar .wrap{display:flex;justify-content:center;align-items:center;height:42px}
  .topbar .tb-melding{
    margin:0;display:block;text-align:center;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .topbar .dot{
    width:7px;height:7px;border-radius:50%;background:#c5e0c5;
    box-shadow:0 0 0 5px rgba(197,224,197,.16);
    display:inline-block;margin-right:11px;animation:pulse-soft 3.2s ease-in-out infinite;
  }
  /* Het nummer is aanklikbaar en dat hoort te zien te zijn; een vette regel
     zonder onderstreping leest als mededeling en niet als knop. */
  .topbar .tb-nr{
    color:#fff;
    text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45);
  }
  .topbar .tb-nr:hover{text-decoration-color:#fff}
  /* De korte vorm staat op desktop uit; het scheidingsteken hoort erbij en
     verdwijnt dus mee. */
  .topbar .tb-kort{display:none}
  .topbar .tb-kort::after{content:"·";margin:0 8px;opacity:.55;font-weight:400}

  /* ---------- nav (no hard underline; pill-shaped) ---------- */
  nav.main{
    position:sticky;top:0;z-index:30;
    background:#faf5ec;
  }
  nav.main::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:60px;
    background:linear-gradient(180deg,rgba(250,245,236,0),rgba(250,245,236,0));
    pointer-events:none;
  }
  nav.main .wrap{display:flex;align-items:center;justify-content:space-between;height:90px}
  .brand{display:flex;align-items:center;gap:14px}
  .brand-logo{height:56px;width:auto;display:block}
  .footer-brand-logo{height:80px;width:auto;display:block;background:rgba(255,255,255,.92);padding:10px 16px;border-radius:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.35)}
  .links{display:flex;gap:6px;align-items:center}
  .links a{
    font-size:13.5px;color:var(--ink-soft);
    padding:9px 16px;border-radius:999px;
    /* Geen `all`: deze hover wijzigt kleur en achtergrond, verder niets. */
    transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft);
  }
  .links a:hover{color:var(--aubergine);background:rgba(74,52,97,.06)}
  .links a.active{color:var(--aubergine);background:rgba(74,52,97,.08)}
  .nav-cta{display:flex;gap:10px;align-items:center}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 26px;border-radius:999px;
    font-size:13.5px;font-weight:400;letter-spacing:.01em;
    border:1px solid transparent;cursor:pointer;font-family:inherit;
    /* Geen `all`. De knop-hovers wijzigen achtergrond, kleur, rand, schaduw en
       positie; meer niet. `all` tweent ook breedte en padding mee zodra iets
       daaraan verandert, en dat is precies wat er niet moet gebeuren. */
    transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft),
               border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft),
               transform .35s var(--ease-soft);
  }
  .btn.primary{
    background:var(--aubergine);color:#fff;
    box-shadow: 0 12px 28px -16px rgba(74,52,97,.65);
  }
  .btn.primary:hover{background:var(--aubergine-deep);transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(74,52,97,.7)}
  .btn.ghost{background:transparent;border-color:rgba(74,52,97,.2);color:var(--ink-soft)}
  .btn.ghost:hover{border-color:var(--aubergine);color:var(--aubergine);background:rgba(74,52,97,.04)}
  .btn.ghost-light{background:transparent;border-color:rgba(255,255,255,.28);color:#eaf3ee}
  .intro-cta{margin-top:34px}
  .btn.ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
  .btn .arr{display:inline-block;transition:transform .35s var(--ease-soft)}
  .btn:hover .arr{transform:translateX(4px)}
  @media (max-width:920px){.links{display:none}}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;padding:60px 0 100px;overflow:hidden;
    background:
      radial-gradient(1100px 600px at 90% -10%, rgba(220,181,174,.35), transparent 60%),
      radial-gradient(900px 600px at -10% 60%, rgba(184,196,173,.28), transparent 60%),
      var(--paper);
  }
  .hero .blob.b1{--kern:210px;width:690px;height:690px;background:#e8c8d8;top:-215px;right:-235px;animation:drift 14s ease-in-out infinite}
  .hero .blob.b2{--kern:170px;width:610px;height:610px;background:#c5d8c5;bottom:-215px;left:-215px;animation:drift2 18s ease-in-out infinite}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;position:relative;z-index:1}
  .eyebrow{
    display:inline-flex;align-items:center;gap:14px;
    color:var(--teal);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
    margin-bottom:24px;font-weight:400;
  }
  .eyebrow .leaf{
    width:22px;height:22px;border-radius:50% 0 50% 50%;
    background:linear-gradient(135deg,var(--teal-soft),var(--teal));
    transform:rotate(-30deg);opacity:.8;
  }
  .hero h1{
    font-family:'Cormorant Garamond',serif;font-weight:400;
    font-size:clamp(44px,5.6vw,72px);
    line-height:1.04;color:var(--aubergine);
    letter-spacing:var(--tracking-display);margin-bottom:28px;
  }
  .hero h1 em{font-style:italic;color:var(--teal);font-weight:400;display:inline-block}
  .hero h1 .swirl{
    position:relative;display:inline-block;
  }
  .hero h1 .swirl::after{
    content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.18em;
    background:radial-gradient(ellipse at center, rgba(220,181,174,.5), transparent 70%);
    z-index:-1;
  }
  .hero p.lede{
    font-size:17px;line-height:1.75;color:var(--ink-soft);
    max-width:520px;margin-bottom:32px;font-weight:300;
  }
  .hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .hero-meta{
    margin-top:48px;display:flex;gap:48px;align-items:flex-start;
    padding-top:30px;max-width:560px;
    border-top:1px solid transparent;
    background:linear-gradient(90deg, transparent, rgba(74,52,97,.18) 30%, rgba(74,52,97,.18) 70%, transparent) top / 100% 1px no-repeat;
  }
  .hero-meta .item{flex:1}
  .hero-meta .num{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:38px;color:var(--aubergine);line-height:1;font-weight:500;
  }
  .hero-meta .label{font-size:12px;color:var(--ink-soft);margin-top:8px;line-height:1.55;font-weight:300}

  /* De tegel "Wie is Erika" onder de hero-meta is op 2026-08-14 weggehaald, op
     desktop en op mobiel. De knop "Maak kennis" hierboven gaat naar dezelfde
     pagina, dus er is geen bestemming verdwenen, alleen een tweede ingang. */

  /* hero art - organic blob mask, no hard rectangle */
  .hero-art{
    position:relative;aspect-ratio:5/6;
  }
  .hero-art .shape{
    position:absolute;inset:0;
    border-radius: 62% 38% 54% 46% / 50% 56% 44% 50%;
    overflow:hidden;
    background:
      radial-gradient(circle at 30% 30%, #f6dde1, #e8c5cd 40%, #d8a8b8 80%);
    box-shadow:
      0 50px 90px -40px rgba(74,52,97,.35),
      inset 0 0 0 12px rgba(255,255,255,.35);
    animation:morph 18s ease-in-out infinite;
  }
  @keyframes morph {
    0%,100% { border-radius: 62% 38% 54% 46% / 50% 56% 44% 50%; }
    50%     { border-radius: 54% 46% 62% 38% / 56% 44% 50% 50%; }
  }
  /* Zelfgehost sinds 2026-08-21. Stond hier als externe URL naar
     images.unsplash.com en werd dus bij élke paginaweergave bij een vreemde
     server opgehaald, in de eerste sectie van de site en met het IP-adres van
     elke bezoeker erbij. Zelfde foto, nu 1600px WebP van 79 kB.
     Herkomst en licentie: assets/img/hero-home.herkomst.json. */
  .hero-art .ph{
    position:absolute;inset:0;
    background-image: url("img/hero-home.webp");
    background-size:cover;
    background-position:center;
  }
  .hero-card{
    position:absolute;left:-40px;bottom:60px;
    background:rgba(250,245,236,.94);
    padding:30px 32px 28px;
    border-radius: 30px 28px 32px 26px;
    max-width:320px;
    box-shadow:0 36px 70px -32px rgba(42,32,66,.35);
    animation: hover-soft 9s ease-in-out infinite;
  }
  @keyframes hover-soft{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  .hero-card .quote{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:22px;line-height:1.4;color:var(--aubergine);
  }
  .hero-card .who{
    margin-top:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:400;
  }
  .hero-deco{
    position:absolute;right:-30px;top:-30px;width:160px;height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(220,181,174,.45), transparent 70%);
    animation: breathe 10s ease-in-out infinite;
  }
  .hero-deco-2{
    position:absolute;left:38%;top:-40px;width:80px;height:80px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(184,196,173,.55), transparent 70%);
    animation: drift2 20s ease-in-out infinite;
  }
  /* De naad hero -> intro stond op 36,0 (1280) en 38,7 (390), terwijl beide
     secties op --paper staan en dus naadloos in elkaar horen over te lopen. De
     sagewas onderin de hero botst op de lilawas bovenin de intro. Laat allebei
     de randen over de laatste 120px terugdoven naar kaal papier, met de laatste
     22% vlak; zonder die vlakke staart blijft er een meetbare sprong. De
     nulkleur staat er als rgba met alfa 0 en niet als transparent: transparent
     is doorzichtig zwart en verloopt in sommige browsers grijzig. */
  /* z-index 0 en niet 1: dit element staat als laatste kind in de sectie, en bij
     een gelijke z-index wint wat later in de DOM staat. Op 1 lag de uitdoving
     over de hero-meta en werd "melding van overlijden" half weggewassen. Op 0
     ligt hij nog wel boven de blobs (die staan op auto en eerder in de DOM) maar
     onder .hero .wrap, dat op 1 staat. */
  .hero-uitdoof{
    position:absolute;left:0;right:0;bottom:0;height:120px;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom, rgba(250,245,236,0) 0%, rgba(250,245,236,1) 78%, rgba(250,245,236,1) 100%);
  }
  .intro-uitdoof-boven{
    position:absolute;left:0;right:0;top:0;height:120px;z-index:1;pointer-events:none;
    background:linear-gradient(to top, rgba(250,245,236,0) 0%, rgba(250,245,236,1) 78%, rgba(250,245,236,1) 100%);
  }

  /* ---------- HERO OP EEN TELEFOON ----------
     DIT BLOK STAAT MET OPZET IN home.css EN NIET IN home-mobiel.css.
     .hero is een sitebrede component uit dit bestand en wordt door twee
     sjablonen gebruikt: front-page.php en page-een-overlijden.php.
     Van 2026-08-14 's ochtends tot die middag stond dit blok in home-mobiel.css,
     dat alleen op de voorpagina laadt; /een-overlijden/ stond in die uren op een
     telefoon in twee kolommen met een leeskolom van 180px. De scheidslijn tussen
     de twee bestanden is "homepage of sitebreed", niet "mobiel of niet".

     Op mobiel is het hero-beeld geen halve pagina meer maar een klein vignet
     rechtsboven, naast de kop. De quotekaart valt weg: op 390px stond die onder
     een beeld dat zelf al de halve hoogte vulde.

     De kop houdt rechts de breedte van het vignet vrij en breekt daardoor over
     vier regels in plaats van drie. Dat is met opzet en op 2026-08-14 bevestigd.

     DE KOP KRIMPT DAARBIJ, EN DAT MOET WEL. Gemeten in de browser op 390px:
     de kolom is 342px, het vignet 117px, dus er blijft 207px over. Bij de
     desktopgrootte van 44px zijn de drie regels 208, 225 en 259px breed, dus ze
     passen geen van drieën; de kop brak over zes regels. Bij 38px worden ze 180,
     194 en 224px: de eerste twee passen ernaast en alleen "warmte en rust."
     breekt, wat de vier regels oplevert die gevraagd zijn.

     De clamp hieronder geeft 36px op 390 en loopt terug naar 44px vanaf ongeveer
     480px, waar de kop weer op drie regels past. Ook het vignet krimpt mee: met
     een ondergrens van 110px bleef er op 320px maar 144px over en werden het zes
     regels. Met 96px is dat 158px en zijn het er vier, net als op 390.

     Meet dit opnieuw als de kop of het lettertype wijzigt. Doe dat in de browser
     en niet op een schermafdruk van een telefoon: zo'n afdruk toont de pagina
     teruggeschaald en levert breedtes die een vijfde te klein zijn. Daar is deze
     regel de eerste keer op stukgelopen.
     ---------------------------------------------------------------- */
  @media (max-width:880px){
    .hero{padding:40px 0 80px;--vignet:clamp(96px,30vw,160px)}
    .hero .wrap{grid-template-columns:1fr;gap:60px}

    /* .hero-art gaat uit de rasterstroom en wordt rechtsboven vastgezet.
       .hero .wrap staat al op position:relative, dus dat is het referentievlak.
       right is de zijmarge van .wrap, niet 0: right:0 zet hem tegen de schermrand.
       --vignet-top is 0 op de homepage, waar de kop het eerste element in de
       kolom is. Een sjabloon met iets bóven de kop zet die variabele op de
       VOLLE HOOGTE daarvan, inclusief ondermarge. Dan begint het vignet precies
       waar de kop begint, en klopt de min-height hieronder zonder rekenwerk. */
    .hero-art{
      position:absolute;top:var(--vignet-top,0px);right:44px;z-index:2;
      width:var(--vignet);aspect-ratio:5/6;
    }
    /* De schaduw en de binnenrand van het ontwerp zijn gemaakt voor een beeld van
       een halve pagina. Op 120px zijn ze groter dan het beeld zelf. */
    .hero-art .shape{
      box-shadow:
        0 18px 34px -16px rgba(74,52,97,.35),
        inset 0 0 0 5px rgba(255,255,255,.35);
    }
    /* De quotekaart en de twee losse waaszakken uit. De deco-cirkels zijn 160px
       en 80px en dus groter dan het vignet. De kleurcombinatie bij binnenkomst
       blijft ongemoeid: die komt uit de radiale verlopen op .hero zelf en uit
       .blob.b1 en .blob.b2, niet uit deze twee. */
    .hero-card{display:none}
    .hero-deco,.hero-deco-2{display:none}

    /* De roze gloed onder "warmte en rust." hoort onder één regel te liggen. De
       span is een inline-block, dus zodra die regel afbreekt beslaat de gloed de
       volle breedte van het blok en ligt hij onder "rust." als een losse streep
       die naar rechts doorloopt. Op mobiel breekt die regel altijd, dus hier uit. */
    .hero h1 .swirl::after{display:none}

    /* min-height houdt de lede onder het vignet, ook als de kop bij een andere
       schermbreedte korter uitvalt. 1.2 is de verhouding 6/5 van het beeld.
       Er staat geen --vignet-top in deze som, en dat is met opzet: kop en vignet
       beginnen per afspraak op dezelfde hoogte, dus wat de één opschuift, schuift
       de ander mee. Verrekenen zou de reservering juist te klein maken; zo is dat
       op 2026-08-14 de eerste keer misgegaan (6px speling in plaats van 42). */
    .hero h1{
      font-size:clamp(30px,9.2vw,44px);
      padding-right:calc(var(--vignet) + 18px);
      min-height:calc(var(--vignet) * 1.2);
    }
  }
  /* Onder 720px versmalt .wrap zijn zijmarge van 44 naar 24px; het vignet schuift mee. */
  @media (max-width:720px){
    .hero-art{right:24px}
    /* "15+ jaar" (2026-10-30) brak op 390px over twee regels: drie gelijke
       kolommen van 82px. Nu krijgt elk cijfer zijn eigen breedte en blijft het
       op één regel; de labels lopen eronder door. */
    .hero-meta{gap:22px}
    .hero-meta .item{flex:0 1 auto}
    .hero-meta .num{white-space:nowrap;font-size:32px}
  }

  /* ---------- INTRO - organic, natural editorial ---------- */
  .intro{
    position:relative;padding:160px 0 180px;color:var(--ink);
    background:
      radial-gradient(900px 600px at 8% 18%, rgba(220,196,232,.28), transparent 60%),
      radial-gradient(800px 600px at 95% 85%, rgba(184,196,173,.22), transparent 60%),
      var(--paper);
    overflow:hidden;
  }
  /* soft floating leaf-like organic shapes in the background */
  .intro::before{
    content:"";position:absolute;top:-80px;right:-120px;
    width:520px;height:520px;
    border-radius: 62% 38% 54% 46% / 50% 56% 44% 50%;
    background:radial-gradient(circle at 35% 35%, rgba(220,196,232,.45), rgba(184,160,210,.18) 60%, transparent 80%);
    animation: morph 22s ease-in-out infinite;
    pointer-events:none;
  }
  .intro::after{
    content:"";position:absolute;bottom:-140px;left:-100px;
    width:420px;height:420px;
    border-radius: 54% 46% 62% 38% / 56% 44% 50% 50%;
    background:radial-gradient(circle at 60% 40%, rgba(184,196,173,.35), rgba(184,196,173,.12) 60%, transparent 80%);
    animation: morph 26s ease-in-out infinite reverse;
    pointer-events:none;
  }
  .intro .wrap{
    position:relative;display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap:90px;align-items:center;z-index:1;
  }
  .intro .label{
    font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--aubergine);margin-bottom:28px;font-weight:500;
    display:flex;align-items:center;gap:14px;
  }
  .intro .label .leaf{
    width:18px;height:18px;
    border-radius:50% 0 50% 50%;
    background:var(--aubergine);transform:rotate(-30deg);opacity:.4;
  }
  .intro h2{
    font-family:'Cormorant Garamond',serif;font-weight:400;
    font-size:clamp(40px,4.4vw,58px);line-height:1.06;color:var(--aubergine);
    letter-spacing:var(--tracking-display-tight);margin-bottom:36px;
  }
  .intro h2 em{font-style:italic;color:var(--teal,#3a6b62)}
  .intro p{font-size:16.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:18px;max-width:560px;font-weight:300}
  /* De doos volgt de tekst en niet de kolom. Stond op alleen max-width, en dan
     rekt een blokelement zich tot de volle 520px uit terwijl de quote er 158px
     van gebruikt: meer dan twee keer zoveel leegte als tekst. Met fit-content
     wordt hij 36 + 158 + 30 = 224px. De max-width blijft staan als plafond voor
     een langere quote; die breekt dan gewoon op 520. Gemeten 2026-09-10. */
  .intro .pull{
    margin-top:44px;position:relative;
    padding:28px 30px 28px 36px;max-width:520px;width:fit-content;
    background:rgba(255,255,255,.55);
    border-radius: 24px 28px 22px 26px;
    box-shadow:0 24px 50px -28px rgba(74,52,97,.25);
  }
  .intro .pull::before{
    content:"“";position:absolute;left:14px;top:6px;
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:64px;line-height:1;color:var(--aubergine);opacity:.25;
  }
  .intro .pull .v{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:22px;line-height:1.4;color:var(--aubergine);
  }
  .intro .pull .k{
    font-size:10px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ink-mist,#8a8090);margin-top:10px;font-weight:500;
  }

  /* portrait - organic asymmetric soft shape, gently morphing */
  .intro-portrait{
    position:relative;aspect-ratio:4/5;z-index:1;
  }
  .intro-portrait .panel{
    position:absolute;inset:36px -36px -36px 36px;
    background:linear-gradient(160deg, #e9d8e4, #cbb6d8 60%, #b89dd0);
    border-radius: 58% 42% 50% 50% / 48% 56% 44% 52%;
    opacity:.85;
    animation:morph 24s ease-in-out infinite;
    box-shadow:0 30px 60px -32px rgba(74,52,97,.35);
  }
  .intro-portrait .photo{
    position:absolute;inset:0;
    border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%;
    overflow:hidden;
    background:url("img/erika-portrait.webp") center 22%/cover no-repeat;
    box-shadow:0 50px 90px -36px rgba(74,52,97,.45);
    animation:morph 24s ease-in-out infinite reverse;
  }
  /* small typographic tag tucked under the photo */
  .intro-portrait .tag{
    position:absolute;left:6%;bottom:-22px;
    background:var(--paper);padding:10px 18px;
    border-radius:999px;
    /* Kopfont in een kleine maat sinds 2026-11-02; de monospace in hoofdletters was te hard. */
    font-family:var(--font-display);font-size:17px;line-height:1.2;
    color:var(--aubergine);white-space:nowrap;
    box-shadow:0 12px 28px -14px rgba(74,52,97,.3);
  }
  /* mobiel: zie home-mobiel.css, sectie 2 (intro) */

  /* ---------- SERVICES - petal cards on cream ---------- */
  .services{
    position:relative;
    /* Als enige sectie op deze pagina had .services geen overflow:hidden, terwijl
       hij wel een blob op right:-80px draagt die 340px breed is. Dat maakte het
       document op 390px 86px te breed, waarna Safari de hele pagina terugschaalde
       naar 83%. Gemeten 2026-08-14 met overloopbron.cjs. */
    overflow:hidden;
    padding:160px 0 160px;
    background:
      radial-gradient(900px 600px at 90% 10%, rgba(220,181,174,.22), transparent 55%),
      radial-gradient(800px 600px at 5% 90%, rgba(184,196,173,.22), transparent 55%),
      var(--cream);
  }
  .services .blob.b1{--kern:170px;width:610px;height:610px;background:#e8c8d8;top:calc(5% - 135px);right:-215px;opacity:.5;animation:drift 24s ease-in-out infinite}
  .services .head{
    display:grid;grid-template-columns:1fr 1.3fr;gap:80px;
    align-items:end;margin-bottom:90px;
  }
  .section-label{
    font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--teal);margin-bottom:22px;display:flex;align-items:center;gap:14px;font-weight:400;
  }
  .section-label .leaf{
    width:18px;height:18px;border-radius:50% 0 50% 50%;
    background:var(--teal-soft);transform:rotate(-30deg);opacity:.7;
  }
  .services h2{
    font-family:'Cormorant Garamond',serif;font-weight:400;
    font-size:clamp(40px,4.5vw,58px);line-height:1.08;color:var(--aubergine);letter-spacing:var(--tracking-display);
  }
  .services h2 em{font-style:italic;color:var(--teal)}
  .services .head p{font-size:17px;line-height:1.85;color:var(--ink-soft);max-width:480px;font-weight:300}

  .petals{
    display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  }
  .petal{
    background:rgba(255,255,255,.55);
    padding:54px 40px 44px;
    border-radius: 38px 28px 38px 28px;
    position:relative;
    transition:transform .55s var(--ease-soft), background .4s var(--ease-soft), box-shadow .5s var(--ease-soft);
    box-shadow: 0 30px 60px -40px rgba(74,52,97,.18);
  }
  /* De middelste kaart zakte hier 20px; sinds 2026-10-30 staan de drie op gelijke hoogte (wens Erika). */
  .petal:nth-child(2){border-radius: 28px 38px 28px 38px}
  .petal:nth-child(3){border-radius: 38px 28px 38px 28px}
  .petal:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.85);
    box-shadow: 0 40px 80px -30px rgba(74,52,97,.25);
  }
  .petal .num{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:14px;color:var(--teal);letter-spacing:.06em;margin-bottom:30px;display:block;
  }
  /* Getekend icoon per thema, gecentreerd in de kaart (2026-08-14). Verving de
     drie gemorphte blobvlakken met een SVG erin; die vroegen om drie
     verschillende achtergrondkleuren en concurreerden met de kaartvorm.
     De bestanden zijn 511 x 259 met transparante grond.

     De breedte stuurt en de hoogte volgt: met een vaste hoogte en max-width:100%
     zou een smalle kaart de verhouding platdrukken.

     Deze regel is op 2026-08-14 een dag lang stil weggevallen doordat het
     commentaar hierboven halverwege werd afgesloten: de tekst erna werd een
     ongeldige selector, en die slikte de eerstvolgende regel op. Zet nooit een
     tweede afsluiter in een commentaarblok. */
  .petal .petal-icoon{
    display:block;margin:0 auto 30px;
    width:min(100%,215px);height:auto;
  }
  .petal h3{letter-spacing:var(--tracking-display);
    font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;
    font-size:32px;color:var(--aubergine);margin-bottom:16px;line-height:1.18;
  }
  .petal p{font-size:15px;line-height:1.8;color:var(--ink-soft);margin-bottom:32px;font-weight:300}
  .petal .more{
    font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--aubergine);display:inline-flex;align-items:center;gap:10px;
    transition:gap .35s var(--ease-soft);
  }
  .petal .more::after{
    content:"";width:24px;height:1px;background:currentColor;
    transition:width .35s var(--ease-soft);
  }
  .petal:hover .more::after{width:36px}
  /* mobiel: zie home-mobiel.css, sectie 3 (services) */

  /* ---------- APPROACH - flowing path of steps ---------- */
  .approach{
    position:relative;padding:110px 0 120px;overflow:hidden;
    background:
      radial-gradient(1000px 600px at 10% 20%, rgba(232,222,240,.6), transparent 55%),
      radial-gradient(900px 600px at 95% 80%, rgba(216,228,223,.6), transparent 55%),
      var(--paper);
  }
  .approach .top{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:64px;gap:24px}
  .approach h2{
    font-family:'Cormorant Garamond',serif;font-weight:400;
    font-size:clamp(36px,4vw,52px);line-height:1.08;color:var(--aubergine);
    letter-spacing:var(--tracking-display);max-width:none;white-space:nowrap;
  }
  .approach h2 em{font-style:italic;color:var(--teal)}
  .approach .top p{max-width:360px;font-size:16px;color:var(--ink-soft);line-height:1.85;font-weight:300}

  .path{
    position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    max-width:1080px;margin:0 auto;padding:8px 40px 0;align-items:start;
  }
  /* gentle dotted curve connecting circles, drawn in SVG */
  .path-svg{
    position:absolute;left:40px;right:40px;top:34px;height:80px;width:calc(100% - 80px);
    pointer-events:none;z-index:0;
  }
  .step{position:relative;z-index:1;padding:0 26px;opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease-soft), transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .step.in{opacity:1;transform:none}
  .step:nth-child(2){transition-delay:.16s}
  .step:nth-child(3){transition-delay:.32s}
  .step:nth-child(4){transition-delay:.48s}
  .step:nth-child(5){transition-delay:.64s}
  .step + .step::before{
    content:"";position:absolute;left:0;top:6px;width:1px;height:calc(100% - 12px);
    background:linear-gradient(180deg,rgba(74,52,97,0),rgba(74,52,97,.18) 24%,rgba(74,52,97,.18) 76%,rgba(74,52,97,0));
  }
  .step .dot{display:none}

  .step h3{
    display:flex;align-items:center;gap:10px;
    font-family:'Cormorant Garamond',serif;font-weight:500;font-size:24px;color:var(--aubergine);margin-bottom:12px;
  }
  .step h3::after{
    content:"";height:1px;flex:1 1 0;min-width:0;
    background:linear-gradient(90deg,rgba(74,52,97,.18),rgba(74,52,97,0));
  }
  @media (min-width:1100px){.step h3{white-space:nowrap}.step h3::after{min-width:14px}}
  .step p{font-size:14.5px;line-height:1.78;color:var(--ink-soft);font-weight:300}
  /* audio card under the 4 steps */
  .audio-card{
    margin:80px auto 0;position:relative;
    max-width:680px;
    background:linear-gradient(120deg, #ebdfc8 0%, #ecdfc4 60%, #e6d5b8 100%);
    border-radius:22px;
    padding:18px 28px 18px 22px;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
    box-shadow:0 30px 60px -34px rgba(74,52,97,.35), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .audio-card .play{
    width:78px;height:78px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #6a3f8a, var(--aubergine,#4a2461) 70%);
    display:grid;place-items:center;cursor:pointer;
    box-shadow:0 14px 28px -10px rgba(74,52,97,.6), 0 0 0 6px rgba(74,52,97,.06), 0 0 0 1px rgba(74,52,97,.12);
    transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
    color:#fff;
  }
  .audio-card .play:hover{transform:scale(1.04)}
  .audio-card .play svg{width:22px;height:22px;margin-left:4px}
  .audio-card .copy{display:flex;flex-direction:column;gap:6px;min-width:0}
  .audio-card .kicker{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:#7a6a5c;font-weight:400}
  .audio-card .quote{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;line-height:1.32;
    color:var(--aubergine,#4a2461);font-weight:400;letter-spacing:-.005em;
  }
  .audio-card .meta{font-family:ui-monospace,monospace;font-size:11px;color:#8a7a6e;letter-spacing:.06em;margin-top:2px}
  .audio-card .bench{width:88px;height:64px;flex-shrink:0;opacity:.85}
  @media (max-width:760px){
    .audio-card{grid-template-columns:auto 1fr;padding:20px 22px;gap:18px}
    .audio-card .bench{display:none}
    .audio-card .quote{font-size:19px}
    .audio-card .play{width:64px;height:64px}
  }

  /* mobiel: zie home-mobiel.css, sectie 4 (approach) */

  /* ---------- QUOTEBAND ---------- */
  .quoteband{
    /* was 90px; het aanhalingsteken erboven besloeg ruim 50px die nu wegvallen */
    position:relative;padding:118px 0;color:#f0e6f5;overflow:hidden;
    background:
      radial-gradient(760px 300px at 50% 18%, rgba(107,81,128,.5), transparent 62%),
      linear-gradient(180deg, var(--aubergine) 0%, #40295c 62%, var(--aubergine-deep) 100%);
  }
  .quoteband .blob.b1{--kern:270px;width:810px;height:810px;background:#5a4170;top:-335px;left:-285px;opacity:.5;animation:drift 22s ease-in-out infinite}
  .quoteband .blob.b2{--kern:210px;width:690px;height:690px;background:#382650;bottom:55px;right:-255px;opacity:.28;animation:drift2 26s ease-in-out infinite}
  /* De golf van de reviewband eronder is één vlakke aubergine. De blob linksonder
     in deze band (b1, 540px met 70px blur) reikt tot ongeveer 8px van de onderrand
     en kleurt die rand juist wég uit die vlakke kleur. Gemeten sprong 2,2 op 1280px,
     precies in het linker meetvenster. Laat de laatste 120px terugdoven naar kale
     aubergine, met de laatste 22% vlak. */
  .quoteband::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom, rgba(47,32,66,0) 0%, rgba(47,32,66,1) 78%, rgba(47,32,66,1) 100%);
  }
  .quoteband .wrap{text-align:center;position:relative;z-index:3;max-width:920px}
  /* 2026-08-14: het grote aanhalingsteken (.mark) en de bronregel (cite) zijn
     eruit. De quote draagt de band nu alleen, en mag daarom groter staan.
     De regels blijven hier niet als dode selectors staan; de markup is weg. */
  /* Het ouderthema Kadence zet in global.min.css een kale element-selector neer:
     blockquote{padding-left:1em;border-left:4px solid var(--global-palette4)}
     plus een marge eronder. Dat tekende een verticale streep links van de quote
     die het ontwerp niet kent, en die viel pas op toen het grote aanhalingsteken
     wegging. welkeregel.cjs vond hem niet, want die kijkt niet in het ouderthema:
     de pagina wint van het gereedschap. */
  .quoteband blockquote{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
    font-size:clamp(28px,3.7vw,46px);line-height:1.32;
    color:#fff;letter-spacing:-.008em;text-wrap:pretty;
    border:0;padding:0;margin:0;
  }

  /* ==================================================================
     REVIEWS - herontwerp 2026-08-14.

     Bron: ruw/uve secties review update Uitvaartverzorging sectie herontwerp/
     design_handoff_reviews_sectie/reviews-sectie.html. Het .rev-*-blok daaruit
     is grotendeels letterlijk overgenomen; de README schrijft dat expliciet toe.

     Drie afwijkingen ten opzichte van dat bestand, alle drie omdat het ontwerp
     een losse band is en dit een sectie tussen twee andere:

     1. De band draagt hier de twee golven (::before uit de quoteband, ::after
        naar de bel-band). Het ontwerp kent die niet.
     2. Daardoor is de padding 160px 0 150px in plaats van 130px 0 140px: de
        bovenste golf is 140px hoog en zou anders over de kop lopen.
     3. .rev-head en .rev-cta gebruiken de sitebrede kolommaat (1180px, 44px
        marge). Die is in het ontwerp gelijk, maar hier vastgelegd op dezelfde
        waarden als .wrap zodat hij meebeweegt met de rest van de pagina.

     De tokens (--star, --surface-card-dark, --hairline-on-dark, --radius-review,
     --shadow-on-dark, --text-on-teal-soft, --text-label-dark, --font-display)
     komen uit tokens-erika.css. Dat bestand laadt op de homepage sinds
     2026-08-14; zonder dat faalt elke var() hier stil.
     ================================================================== */
  :root{--rev-rail-seconds:140s}

  .rev-sec{
    position:relative;padding:160px 0 150px;color:#eaf3ee;overflow:hidden;
    background:
      radial-gradient(1100px 700px at 50% -10%, rgba(90,138,128,.55), transparent 55%),
      linear-gradient(165deg, var(--teal-deep), #1f3f3a 70%, #2a4f48);
  }
  /* wave carrying the quoteband purple down into the teal */
  .rev-sec::before{
    content:"";position:absolute;left:0;right:0;top:-2px;height:140px;pointer-events:none;z-index:4;
    background:var(--aubergine-deep);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,100 C1180,50 920,110 720,80 C520,50 260,110 0,60 Z' fill='black'/></svg>") top center / 100% 100% no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,100 C1180,50 920,110 720,80 C520,50 260,110 0,60 Z' fill='black'/></svg>") top center / 100% 100% no-repeat;
  }
  .rev-sec::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:4;pointer-events:none;
    background:var(--paper);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0,120 L0,90 C260,40 520,100 720,70 C920,40 1180,90 1440,50 L1440,120 Z' fill='black'/></svg>") bottom center / 100% 100% no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0,120 L0,90 C260,40 520,100 720,70 C920,40 1180,90 1440,50 L1440,120 Z' fill='black'/></svg>") bottom center / 100% 100% no-repeat;
  }
  /* --- kop --- */
  .rev-head{position:relative;z-index:3;max-width:1180px;margin:0 auto 56px;padding:0 44px;text-align:center}
  .rev-h2{letter-spacing:var(--tracking-display);font-family:var(--font-display);font-weight:400;font-style:italic;font-size:var(--text-h2);line-height:1.08;color:#fff;margin:0 0 18px}
  .rev-intro{max-width:580px;margin:0 auto 40px;font-size:16px;font-weight:300;line-height:var(--leading-body);color:var(--text-on-teal-soft)}
  .rev-intro a{color:#fff;text-decoration:underline;text-underline-offset:3px}

  /* --- ratingpill. Score en aantal komen live uit de Places API.
         De rand is een Google-kleurverloop: drie achtergrondlagen, waarvan de
         derde op border-box staat en dus alleen door de rand zichtbaar is.
         Vandaar border:1px solid transparent; zonder die rand is er geen
         border-box om in te tekenen. --- */
  .rev-pill-wrap{display:flex;justify-content:center}
  .rev-pill{
    display:inline-flex;align-items:center;gap:22px;padding:16px 34px;
    border:1px solid transparent;border-radius:999px;text-decoration:none;
    background:
      linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055)) padding-box,
      linear-gradient(#2c4b45,#2c4b45) padding-box,
      linear-gradient(96deg,rgba(234,67,53,.7) 0%,rgba(251,188,5,.7) 32%,rgba(52,168,83,.7) 64%,rgba(66,133,244,.7) 100%) border-box;
    transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background .35s var(--ease-soft);
  }
  /* Hover: alleen 2px omhoog, schaduw, en de rand naar volle Google-kleur.
     Achtergrond en tekst blijven groen; een witte hover-variant is expliciet
     afgekeurd in de handoff. */
  .rev-pill:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 44px -30px rgba(8,26,23,.75);
    background:
      linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) padding-box,
      linear-gradient(#2c4b45,#2c4b45) padding-box,
      linear-gradient(96deg,#ea4335 0%,#fbbc05 32%,#34a853 64%,#4285f4 100%) border-box;
  }
  .rev-pill-stars{display:block;flex:none;fill:var(--star)}
  .rev-pill-score{font-family:var(--font-display);font-style:italic;font-size:30px;font-weight:500;color:#fff;line-height:1}
  .rev-pill-div{width:1px;height:26px;background:var(--hairline-on-dark)}
  .rev-pill-count{font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--text-on-teal-soft)}

  /* --- rails --- */
  .rev-row{
    position:relative;z-index:2;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
  .rev-row-b{margin-top:24px}
  .rev-rail{display:flex;gap:24px;width:max-content;animation:rev-rail-a var(--rev-rail-seconds) linear infinite}
  .rev-row-b .rev-rail{animation-name:rev-rail-b}
  /* De lijst staat tweemaal in de rail, daarom is -50% een naadloze lus. */
  @keyframes rev-rail-a{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes rev-rail-b{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  /* Stilzetten om te kunnen lezen: bij muis en bij toetsenbord. */
  .rev-rail:hover,.rev-row:focus-within .rev-rail{animation-play-state:paused}
  @media (prefers-reduced-motion: reduce){.rev-rail{animation:none}}

  /* --- kaart --- */
  .rev-card{
    width:400px;flex:none;display:flex;flex-direction:column;
    background:var(--surface-card-dark);border-radius:var(--radius-review);
    padding:34px 32px 30px;box-shadow:var(--shadow-on-dark);
    transition:background .55s var(--ease-soft);
  }
  .rev-row-b .rev-card{border-radius:var(--radius-review-alt)}
  .rev-card:hover{background:var(--surface-card-dark-hover)}
  .rev-quote{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:19px;line-height:1.5;color:#fff;margin:0 0 30px;text-wrap:pretty}
  .rev-foot-row{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--hairline-on-dark)}
  .rev-foot-col{min-width:0}
  .rev-nameline{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:14px;font-weight:400;color:#fff;line-height:1.4}
  .rev-stars-sm{display:block;flex:none;fill:var(--star)}
  /* Eigen klantervaring: één cursief goudwoord in plaats van sterren. Er zijn
     geen sterren voor wat niet op Google staat. */
  .rev-word{font-family:var(--font-display);font-style:italic;font-size:16px;font-weight:500;color:var(--star);line-height:1;white-space:nowrap}
  .rev-srcline{display:flex;align-items:center;gap:8px;margin-top:5px}
  .rev-srcline img.rev-g{width:17px;height:17px;flex:none;display:block}
  .rev-srcline img.rev-uve{height:23px;width:auto;flex:none;display:block}
  .rev-src{font-family:var(--font-body);font-size:11px;font-weight:300;letter-spacing:.06em;color:var(--text-label-dark)}

  /* --- knop --- */
  .rev-cta{position:relative;z-index:3;max-width:1180px;margin:70px auto 0;padding:0 44px;display:flex;flex-direction:column;align-items:center;gap:18px}
  a.rev-btn{
    display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:14px 30px;
    border:1px solid rgba(255,255,255,.35);border-radius:999px;
    font-family:var(--font-body);font-size:15px;font-weight:400;color:#fff;text-decoration:none;
    background:transparent;transition:background .35s var(--ease-soft),border-color .35s var(--ease-soft);
  }
  /* color:#fff hoort hier expliciet te staan. Kadence zet sitebreed
     a:hover{color:var(--global-palette-highlight-alt)} en dat is blauw. Die
     selector (0,1,1) is specifieker dan .rev-btn (0,1,0), dus zonder deze regel
     wordt het label blauw op de teal band: onleesbaar. */
  .rev-btn:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
  .rev-btn .arrow{transition:transform .35s var(--ease-soft)}
  .rev-btn:hover .arrow{transform:translateX(4px)}

  /* mobiel: zie home-mobiel.css, sectie 6 (reviews). Die houdt de eigen grens
     van 900px, want daar valt rij B weg; dat komt uit de handoff. */

  /* ==================================================================
     CONTACT: de bel-band (2026-08-14).

     Verving de tweekolommige contactsectie (.contact met .way-rijen en
     .contact-card). Dit is dezelfde band als onderaan de dienst-, inspiratie-
     en werkgebiedpagina's, letterlijk overgenomen uit .dienst-bel in
     assets/dienst.css, met één verschil: daar staat hij op teal en hier op
     papier, want de homepage eindigt licht.

     Dat verschil dwingt de kleuren om: kop en tekst worden donker, de knoppen
     krijgen dekking in plaats van een lichte rand op donker. De maatvoering
     (padding, typografie, radii, knophoogte) is gelijk gehouden aan dienst.css,
     zodat de band op elke pagina hetzelfde aanvoelt.

     Eigen klassenvoorvoegsel: dienst.css laadt niet op de homepage en hoort dat
     ook niet te doen, want dat bestand brengt een heel paginasjabloon mee.
     ================================================================== */
  .belband{
    position:relative;padding:150px 0 130px;overflow:hidden;
    background:
      radial-gradient(900px 600px at 90% 20%, rgba(220,181,174,.28), transparent 55%),
      radial-gradient(800px 600px at 5% 90%, rgba(184,196,173,.28), transparent 55%),
      var(--paper);
  }
  .belband-vlek{
    --kern:260px;
    position:absolute;width:790px;height:790px;right:-285px;bottom:-355px;
    border-radius:50%;background:rgba(184,196,173,.28);filter:blur(70px);
    animation:drift2 26s ease-in-out infinite;pointer-events:none;z-index:0;
  }
  @supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
    .belband-vlek{ 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))) }
  }
  .belband-inner{
    position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 44px;
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .belband-label{
    display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:999px;
    background:rgba(74,52,97,.07);color:var(--teal);
    font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  }
  /* Het blaadje vóór het label is er op 2026-08-14 uitgehaald op verzoek. De
     gap in .belband-label heeft daardoor geen effect meer; hij blijft staan voor
     als er ooit weer een tweede kind bij komt. */
  .belband-kop{
    font-family:'Cormorant Garamond',serif;font-weight:400;margin:34px 0 0;
    font-size:clamp(31px,4vw,46px);line-height:1.12;letter-spacing:var(--tracking-display);color:var(--aubergine);
  }
  .belband-kop em{font-style:italic;color:var(--teal)}
  .belband-p{margin:26px 0 0;max-width:32em;font-size:16.5px;line-height:1.85;font-weight:300;color:var(--ink-soft);text-wrap:pretty}
  /* Alleen een onderstreep, geen kader. Zet de andere drie randen expliciet op
     none: wp-block-library zet border-style:solid op alles met border-color in
     het style-attribuut, en dat is hier makkelijk per ongeluk te veroorzaken. */
  a.belband-nr{
    margin-top:40px;font-family:'Cormorant Garamond',serif;font-size:54px;line-height:1.1;
    color:var(--aubergine);text-decoration:none;letter-spacing:.02em;padding-bottom:10px;
    border-bottom:1px solid rgba(74,52,97,.3);
    border-top-style:none;border-right-style:none;border-left-style:none;
    transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft);
  }
  .belband-nr:hover{color:var(--aubergine-deep);border-bottom-color:var(--aubergine)}
  .belband-sub{margin:20px 0 0;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mist)}
  .belband-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:42px}
  .belband-knop{
    display:inline-flex;align-items:center;justify-content:center;min-height:48px;gap:10px;
    padding:14px 28px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;
    transition:transform .35s var(--ease-soft),background-color .35s var(--ease-soft),color .35s var(--ease-soft),border-color .35s var(--ease-soft),box-shadow .35s var(--ease-soft);
  }
  .belband-knop svg{flex:0 0 auto}
  a.belband-knop-primair{background:var(--aubergine);color:#fff;box-shadow:0 12px 28px -16px rgba(74,52,97,.65)}
  /* Zelfde verhaal als bij .rev-btn: color:#fff moet hier expliciet staan,
     anders wint a:hover van Kadence en wordt het label blauw op aubergine. */
  .belband-knop-primair:hover{transform:translateY(-2px);background:var(--aubergine-deep);box-shadow:0 18px 36px -18px rgba(74,52,97,.7);color:#fff}
  /* De golf van de voet is papierkleur en heeft een kaarsrechte bovenrand. De
     radiale wassen hierboven kleuren de onderrand van deze band juist weg uit
     dat papier. Laat de laatste 120px terugdoven naar kale papierkleur, met de
     laatste 22% vlak; zonder die vlakke staart blijft er een meetbare sprong. */
  .belband-uitdoof{
    position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom, rgba(250,245,236,0) 0%, rgba(250,245,236,1) 78%, rgba(250,245,236,1) 100%);
  }
  /* Ook de bóvenrand loopt weg uit het papier. De golf boven deze band hoort bij
     de reviewsectie en is één vlakke papierkleur, terwijl de rozewas hier
     (900px op 90% 20%) tot boven de eigen bovenrand reikt. Gemeten sprong 11,1
     op 1280px, in het rechter meetvenster. Spiegelbeeld van de uitdoving
     hierboven, met dezelfde vlakke 22%. */
  .belband-uitdoof-boven{
    position:absolute;left:0;right:0;top:0;height:120px;z-index:1;pointer-events:none;
    background:linear-gradient(to top, rgba(250,245,236,0) 0%, rgba(250,245,236,1) 78%, rgba(250,245,236,1) 100%);
  }
  /* mobiel: zie home-mobiel.css, sectie 7 (bel-band) */

  /* ---------- FOOTER ---------- */
  footer{
    position:relative;padding:100px 0 50px;color:#cfb8d9;overflow:hidden;
    background:linear-gradient(165deg, var(--aubergine-deep), #1c1130);
  }
  footer::before{
    content:"";position:absolute;top:-1px;left:0;right:0;height:120px;
    background:var(--paper);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,40 C1200,90 980,30 720,70 C460,110 240,40 0,90 Z' fill='black'/></svg>") top center / 100% 100% no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,40 C1200,90 980,30 720,70 C460,110 240,40 0,90 Z' fill='black'/></svg>") top center / 100% 100% no-repeat;
  }
  footer .blob.b1{--kern:250px;width:770px;height:770px;background:#382650;top:calc(30% - 135px);right:-285px;opacity:.5;animation:drift 28s ease-in-out infinite}
  footer .wrap{position:relative;z-index:1}
  footer .top{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;
    padding:60px 0 60px;
  }
  footer h2{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#b8d4ca;margin-bottom:24px;font-weight:400}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:14px}
  /* `a:any-link` en niet `a`: de basisregel bovenaan dit bestand staat op
     a:any-link (0,1,1) om het blauw van het moederthema te verslaan, en een
     kale `footer ul a` (0,0,3) zou daar onder liggen. */
  /* transform in plaats van padding-left: padding tweenen laat de browser elke
     stap opnieuw indelen, transform niet. inline-block is daarvoor nodig, want
     op een gewoon inline element doet transform niets. */
  footer ul a:any-link{
    font-size:14px;color:#e8dcef;font-weight:300;display:inline-block;
    transition:color .3s var(--ease-soft), transform .3s var(--ease-soft);
  }
  /* De maat op de ul en niet alleen op de a: "Rijnlaan 7, Heemstede" in de
     contactkolom is geen link en stond daardoor op de body-maat, zichtbaar
     groter dan de regels erboven. Alleen binnen .top, want de plaatsenregel
     eronder heeft zijn eigen maat. */
  footer .top ul{font-size:14px;line-height:1.5}
  footer ul a:hover{color:#fff;transform:translateX(6px)}
  footer .about p{font-size:14px;line-height:1.85;color:#b8a3c4;max-width:340px;margin-top:22px;font-weight:300}
  footer .bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding:34px 0 0;font-size:12.5px;color:#8a7a96;flex-wrap:wrap;gap:14px;
    position:relative;
  }
  footer .bottom::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 20%,rgba(255,255,255,.1) 80%,transparent);
  }
  footer .bottom .links-mini{display:flex;gap:26px}
  footer .bottom a:hover{color:#fff}
  /* Voet onder 880px (herzien 2026-08-14). De vier kolommen vielen eerst terug
     naar twee en daaronder naar één; op een telefoon werd de voet daarmee bijna
     twee schermen lang. Twee ingrepen halen dat eruit zonder iets weg te laten:
     de merkregel wordt één rij (logo náást de tekst in plaats van erboven), en
     de drie linkkolommen blijven naast elkaar staan in plaats van te stapelen.
     Sitebreed: deze voet komt via wp_footer op elke pagina. */
  @media (max-width:880px){
    footer{padding:100px 0 40px}
    footer .top{grid-template-columns:repeat(3,1fr);gap:34px 22px;padding:48px 0 36px}
    footer .about{grid-column:1 / -1;display:flex;align-items:center;gap:22px}
    footer .about .brand{flex:0 0 auto}
    footer .about p{margin-top:0;max-width:none}
    footer .footer-brand-logo{height:64px;padding:8px 13px;border-radius:12px}
  }

  /* ---------- tweaks panel mount ---------- */
  #tweaks-root{position:fixed;right:0;bottom:0;z-index:60}

/* ============ Sitebreed: binnenpagina in de ontwerpstijl ============ */
.site-header, #masthead, .site-footer, #colophon, .kadence-scroll-to-top { display:none !important; }
.entry-hero, .page-hero-section, .entry-hero-container-inner { background: var(--paper) !important; }
.content-container, .content-wrap, .site-main, main { background: var(--paper); }
.entry-content, .entry-header, .page-title-wrap { max-width: 760px; margin-inline: auto; }
.entry-content { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); padding: 30px 24px 80px; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.entry-title, .page-title, .entry-header h1 { font-family:'Cormorant Garamond',serif; color:var(--aubergine); font-weight:500; letter-spacing:-.01em; }
.entry-content h2 { font-size: clamp(28px,3.4vw,40px); margin:1.6em 0 .5em; }
.entry-content h3 { font-size: clamp(22px,2.4vw,28px); margin:1.4em 0 .4em; }
.entry-content a { color: var(--aubergine); text-decoration: underline; }
.entry-content ul { padding-left:1.2em; }
.entry-content li { margin-bottom:.5em; }
.entry-content li::marker { color: var(--teal); }
.entry-content .wp-block-button__link, .entry-content .wp-element-button, .entry-content .button { background: var(--aubergine) !important; color:#fff !important; border-radius:999px !important; padding:.7em 1.6em !important; }
/* Footer: werkgebied-regel met alle plaatsen (sitebrede lokale links, onopvallend) */
footer .werkgebied-strip{margin-top:14px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
footer .werkgebied-strip h2{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#b8d4ca;margin:0 0 14px;font-weight:400}
footer .werkgebied-strip ul.plaatsen{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:0;font-size:13px;line-height:1.7}
footer .werkgebied-strip ul.plaatsen li{margin:0;display:inline}
footer .werkgebied-strip ul.plaatsen li:not(:last-child)::after{content:"·";margin:0 10px;color:#8a7a96}
/* display:inline-block en een eigen line-height: als inline element is de
   hoogte van deze link de fontmaat (23,8 px) en haalt hij de minimale
   aanraakmaat van 24 px net niet. Op een inline element komt line-height
   niet aan, want de strut van het blok eromheen wint; op een inline-block
   wel. 26 px geeft marge op beide fontmaten (13 px desktop, 12 px mobiel). */
footer .werkgebied-strip ul.plaatsen a{color:#c6b2d2;font-weight:300;
  display:inline-block;line-height:26px;transition:color .3s}
footer .werkgebied-strip ul.plaatsen a:hover{color:#fff}
footer .werkgebied-strip .werkgebied-all{margin:12px 0 0;font-size:12.5px}
footer .werkgebied-strip .werkgebied-all a{color:#b8d4ca;font-weight:400;transition:color .3s}
footer .werkgebied-strip .werkgebied-all a:hover{color:#fff}

/* Bottom sticky actiebalk (mobiel/tablet) */
/* Drie gelijke vakken. Stond op 1.5fr 1fr 1fr, waardoor de contactknop 43% van
   de balk pakte en de drie knoppen ongelijk aanvoelden. Bij gelijke derden is er
   op 390px 130px per vak; het langste label ("24/7 Bereikbaar", 14px) is daar
   ruim 20px smaller dan. Geldt tot 1100px; daarboven is de balk een zwevend
   eiland op flex, zie kop.css hoofdstuk 6. */
/* Twee gelijke vakken sinds 2026-09-09. Stond op drie; het derde was WhatsApp
   en dat kanaal is op verzoek van Erika van de site af. Komt het ooit terug, zet
   dit dan mee terug op repeat(3,1fr) samen met de knop in functions.php. */
.erika-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(47,32,66,.12);box-shadow:0 -6px 24px -12px rgba(42,35,48,.45)}
.erika-stickybar .sb-item{display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;font-size:14px;font-weight:500;letter-spacing:.01em;background:var(--paper);color:var(--aubergine)}
.erika-stickybar .sb-contact{background:var(--aubergine);color:#fff}
.erika-stickybar svg{width:19px;height:19px;flex-shrink:0}
/* De belknop draagt twee regels: waarvoor je belt boven wat je doet. Het
   dag-en-nachtnummer is alleen voor een melding van overlijden, en dat moet op de
   knop staan en niet ergens in een alinea; dit is op een telefoon de enige
   contactknop die altijd in beeld is. Gemeten op 390px: het vak is 130px breed en
   "Bij een overlijden" is op 10,5px zonder extra spatiering 96px, dus het past op
   één regel naast het belicoon van 19px. */
.erika-stickybar .sb-stapel{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.erika-stickybar .sb-waarvoor{font-size:10.5px;font-weight:400;letter-spacing:.01em;opacity:.72;white-space:nowrap}
/* Twee lengtes van dezelfde regel. In de balk is 104px vrij naast het icoon en
   past alleen de korte; in het eiland op desktop is de breedte vrij en staat de
   hele zin er. */
.erika-stickybar .sb-lang{display:none}
.erika-stickybar .sb-actie{font-size:14px;font-weight:500}
@media(max-width:900px){.erika-stickybar{display:grid}body{padding-bottom:58px}}
/* Onder 360px is het vak 119px en wordt "Bij een overlijden" op 10,5px te krap.
   Dan valt het belicoon weg in plaats van de regel: het icoon zegt niets wat het
   woord "Bellen" niet al zegt, de reden om te bellen wel. */
@media(max-width:360px){
  .erika-stickybar .sb-item{font-size:13px;gap:5px}
  .erika-stickybar .sb-bel svg{display:none}
  .erika-stickybar .sb-waarvoor{font-size:10px}
  .erika-stickybar .sb-actie{font-size:13px}
}

/* De tijden onder het telefoonnummer in de voet. Kleiner en lichter dan de
   links erboven: het is een toelichting en geen vierde contactweg. Geen eigen
   regelhoogte nodig, wel iets lucht eronder zodat hij niet aan het mailadres
   vastplakt. */
footer .fcol-tel-uren{margin:2px 0 10px;font-size:12.5px;line-height:1.55;color:#b8a3c4;font-weight:300}

/* Footer: kleine Venire-verwijzing (footer-only, niet prominent) */
footer .venire-line{margin-top:22px;font-size:12.5px;color:#8a7a96}
footer .venire-line a{color:#b8d4ca;transition:color .3s}
footer .venire-line a:hover{color:#fff}
footer .bottom .links-mini a{transition:color .3s}

/* Contactformulier in de ontwerpstijl */
.erika-form-wrap{margin:40px 0 0}
.erika-form{background:var(--paper-warm);border:1px solid var(--cream-warm);border-radius:28px 24px 30px 22px;padding:34px 32px;display:flex;flex-direction:column;gap:20px;box-shadow:0 30px 60px -40px rgba(74,52,97,.35)}
.erika-form .ef-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.erika-form .ef-field{display:flex;flex-direction:column;gap:7px}
.erika-form .ef-field>span{font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);font-weight:500}
.erika-form input,.erika-form textarea{font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--ink);background:#fff;border:1px solid #e3d8c4;border-radius:12px;padding:13px 15px;transition:border-color .25s,box-shadow .25s;width:100%}
.erika-form input:focus,.erika-form textarea:focus{outline:none;border-color:var(--aubergine);box-shadow:0 0 0 3px var(--aubergine-mist)}
.erika-form textarea{resize:vertical;min-height:130px;line-height:1.6}
.erika-form button.btn.primary{align-self:flex-start;border:none;cursor:pointer;font-size:15px;padding:14px 30px}
.erika-form .ef-note{font-size:13.5px;color:var(--ink-soft);margin:0}
.erika-form .ef-note a{color:var(--aubergine);font-weight:500}
/* Honeypot. Stond eerst alleen onder .erika-form, waardoor het lokaasveld in een
   sjabloon zonder die klasse gewoon zichtbaar was ("Laat dit veld leeg"). De
   regel hoort bij de klasse zelf, niet bij één formulier. Bewust buiten beeld
   en niet display:none: een deel van de bots slaat verborgen velden over. */
.ef-hp,.erika-form .ef-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ef-notice{padding:16px 20px;border-radius:14px;margin-bottom:24px;font-size:14.5px;line-height:1.6}
.ef-notice.ok{background:var(--teal-mist);color:var(--teal-deep);border:1px solid var(--teal-soft)}
.ef-notice.err{background:#f6e2df;color:#8a3a2f;border:1px solid #e0b3aa}
@media(max-width:620px){.erika-form .ef-two{grid-template-columns:1fr}.erika-form{padding:26px 20px}}

/* Contactformulier: verbeterde elementen */
.ef-acute{background:var(--aubergine-mist);border:1px solid #d8c8e4;color:var(--aubergine-deep);border-radius:16px;padding:16px 20px;font-size:14.5px;line-height:1.65;margin-bottom:24px}
.ef-acute a{color:var(--aubergine);font-weight:600;white-space:nowrap}
.erika-form select{font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--ink);background:#fff;border:1px solid #e3d8c4;border-radius:12px;padding:13px 15px;width:100%;transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234a3461' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
.erika-form select:focus{outline:none;border-color:var(--aubergine);box-shadow:0 0 0 3px var(--aubergine-mist)}
.erika-form .ef-field>span em{font-style:normal;color:var(--ink-mist);font-weight:400}
.erika-form .ef-help{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:2px}
.erika-form .ef-reassure{font-size:14px;color:var(--ink-soft);line-height:1.65;margin:0}
.erika-form .ef-privacy{font-size:12.5px;color:var(--ink-mist);line-height:1.55;margin:0}

/* ==================================================================
   Kop en voet op een telefoon (toegevoegd 2026-08-12).
   Sitebreed, niet gebonden aan één pagina. Gemeten op 390px breed:

   - de topbar is één rij van 42px hoog met tekst die niet wrapt. De volle zin
     ("Wij zijn 24/7 bereikbaar voor een melding van overlijden op ...") is op
     390px ruim twee keer zo breed als het scherm en zou door de vaste hoogte
     afgesneden worden. Hieronder staat daarom de korte vorm: de
     bereikbaarheidsregel en het nummer. Op een telefoon is deze balk maar
     één keer te zien — bij het openen van de pagina. Zodra er gescrold wordt
     schuift hij het beeld uit en blijft alleen de navigatiebalk hangen; zie
     kop.css hoofdstuk 4. Daar is geen ruimte voor allebei.
   - de voet valt bij 880px terug naar twee kolommen. Bij 390px is één kolom
     te smal voor die twee, en liepen het e-mailadres en het bezoekadres
     buiten beeld.
   ================================================================== */
@media (max-width:720px){
  /* 720 is dezelfde grens als waarop .wrap zijn padding terugbrengt naar 24px.
     Daarboven is er ruimte zat: de volle zin is bij 13px vet ongeveer 550px
     breed en op 721px scherm blijft er 633px over. Daaronder niet meer. */
  .topbar{font-size:12px;letter-spacing:.02em}
  .topbar .dot{margin-right:9px}
  /* De volle zin eruit, de korte vorm erin. Het nummer blijft in beide staan. */
  .topbar .tb-lang{display:none}
  .topbar .tb-kort{display:inline}
}
@media (max-width:380px){
  /* Gemeten op 320px: de korte vorm is daar 276px en het vak 272px, en dan
     knipt de ellipsis de laatste cijfers van het nummer af. De stip is
     versiering, het nummer is de mededeling. Zonder stip blijft er 14px over. */
  .topbar .dot{display:none}
}
/* Op een telefoon twéé linkkolommen in plaats van de drie van hierboven, met de
   contactgegevens als volle regel eronder.

   Waarom niet drie: een derde van 342px is 114px, en daar past
   "info@uitvaartverzorgingerika.nl" (31 tekens, ±192px) niet in. Afbreken op het
   @-teken helpt niet, want "uitvaartverzorgingerika.nl" is in zijn eentje al
   160px, en kleiner zetten zou naar ongeveer 8px moeten. Het adres heeft dus
   meer dan een kolombreedte nodig, of het moet ingekort worden. Het blijft
   voluit staan.

   De contactgegevens staan daarom als doorlopende regel met punten ertussen,
   hetzelfde patroon als de plaatsenregel eronder. Kost niets aan hoogte: de
   twee overgebleven kolommen worden 162px, waardoor "Wensen vastleggen" en
   "Bij een overlijden" niet meer over twee regels breken. */
@media (max-width:560px){
  footer{padding:90px 0 34px}
  footer .top{gap:24px 18px;padding:38px 0 18px}
  footer .about{gap:16px}
  footer .footer-brand-logo{height:54px;padding:7px 11px;border-radius:11px}
  footer .about p{font-size:13px;line-height:1.7}
  footer .top{grid-template-columns:1fr 1fr}
  footer .fcol-contact{grid-column:1 / -1}
  /* Geen kolom maar lopende tekst. `display:block` met inline li's laat de
     browser zelf de regels indelen: het e-mailadres schuift in zijn geheel naar
     de volgende regel als het niet meer past, in plaats van midden in het woord
     te breken. `overflow-wrap:anywhere` hierboven grijpt pas in als een woord op
     een lege regel niet past, en 192px past ruim in 342px. */
  footer .fcol-contact ul{display:block;gap:0;line-height:1.95}
  footer .fcol-contact li{display:inline}
  footer .fcol-contact li:not(:last-child)::after{content:"·";margin:0 9px;color:#8a7a96}
  footer .top h2{margin-bottom:14px;font-size:10px;letter-spacing:.16em}
  footer .fcol-contact h2{margin-bottom:10px}
  /* De maat hoort op de ul en niet alleen op de a. Een `a` is inline: zijn
     line-height verkleint de regelhoogte niet, want de strut van het blok
     eromheen (1,85 uit de body) bepaalt die. Op de ul erft de li mee en klopt
     ook de losse regel "Rijnlaan 7, Heemstede", die geen link is. */
  footer .top ul{gap:11px;font-size:12.5px;line-height:1.45}
  footer .top ul a{font-size:12.5px}
  footer ul a,footer .bottom a{overflow-wrap:anywhere}
  footer .bottom{justify-content:flex-start;padding-top:24px}
  /* De contactregel eindigt vlak boven de streep; met de 14px marge en 26px
     opvulling uit de basisregel stond daar 66px lucht. */
  footer .werkgebied-strip{margin-top:6px;padding-top:20px}
  footer .werkgebied-strip ul.plaatsen{font-size:12px}
  footer .werkgebied-strip ul.plaatsen li:not(:last-child)::after{margin:0 7px}
}

/* 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. */
.belband-p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(74,52,97,.4);transition:text-decoration-color var(--dur-color) var(--ease-soft)}
.belband-p a:hover{text-decoration-color:var(--aubergine)}