/* ============================================================================
   Kop, uitklapnavigatie en de kleine actiebalk onderaan.
   Sitebreed. Laadt ná home.css en overschrijft daar wat nodig is.
   Spec: werk/04-archief/fase4-bouwverslagen/f4s2-spec-navigatie-kop-voet-2026-08-13.md

   Drie dingen om te weten voordat je hier iets verandert:

   1. home.css zet `*{transition:color,background-color,border-color,opacity}`.
      Elke eigen transition hieronder moet `opacity` expliciet noemen, anders
      valt die weg tegen de globale regel.
   2. home.css zet `.links a{...}` met een eigen padding, kleur en radius. Dat
      raakt ook de links ín een uitklappaneel. Daarom staat overal
      `.subpaneel .sub-link` en niet alleen `.sub-link`: dat is specifieker dan
      `.links a` en wint dus zeker.
   3. `body{overflow-x:hidden}` in home.css knipt alles af wat buiten het scherm
      valt. Een paneel dat te ver naar links of rechts hangt wordt door kop.js
      teruggeschoven met `--shift`.
   ============================================================================ */

.enkel-lezer{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------------
   1. Het omhulsel: bovenbalk en navigatiebalk samen vastgezet
   --------------------------------------------------------------------------- */

.site-head{
  --topbar-h:42px;
  --nav-h:90px;
  --logo-h:70px;
  position:sticky;top:0;z-index:60;
}

/* home.css zet nav.main zelf op sticky. Binnen een vastgezet omhulsel klopt dat
   niet meer: de balk zou alleen mogen plakken binnen de hoogte van haar ouder,
   en die is precies zo hoog als zijzelf. Het omhulsel neemt het over. */
.site-head nav.main{position:relative;top:auto;z-index:auto}

.site-head .topbar{
  height:var(--topbar-h);overflow:hidden;
  transition:height .42s cubic-bezier(.22,.61,.36,1), opacity .3s var(--ease-soft);
}
.site-head .topbar .wrap{height:100%}

.site-head nav.main .wrap{
  height:var(--nav-h);
  transition:height .42s cubic-bezier(.22,.61,.36,1);
}

/* Het logo stond met een inline stijl op 70px. Dat is nu een variabele, zodat
   het bij het krimpen mee kan zakken. */
.site-head .brand-logo{
  height:var(--logo-h);width:auto;object-fit:contain;display:block;
  transition:height .42s cubic-bezier(.22,.61,.36,1);
}

/* Krimpen bij het scrollen, alleen op desktop. kop.js zet de klasse vanaf
   121px. Alleen de navigatiebalk krimpt; de bovenbalk houdt zijn 42px en
   schuift mee. Bovenbalk en navigatie zijn op desktop één geheel: de
   bereikbaarheidsmelding hoort op elke scrollhoogte in beeld te staan, want
   dat is waarvoor iemand hier 's nachts komt. De kop is daarmee 110px hoog
   zodra er gescrold is (42 + 68). */
@media (min-width:1101px){
  .site-head.is-krimp{--nav-h:68px;--logo-h:48px}
  .site-head.is-krimp nav.main{box-shadow:0 14px 34px -28px rgba(42,35,48,.55)}
}

/* ---------------------------------------------------------------------------
   2. De navigatie-items
   --------------------------------------------------------------------------- */

.links{display:flex;gap:1px;align-items:center}
.nav-item{position:relative;display:flex;align-items:center}

/* nowrap is geen opmaak maar een alarm. Zonder deze regel breken zeven labels
   plus vier pijltjes op een klein scherm stilletjes over twee en drie regels,
   en schuift de contactknop over "Contact" heen; dat zag je alleen als je
   ernaar keek. Met nowrap loopt de balk zichtbaar over en valt het meteen op.
   De omslag naar het mobiele menu ligt daarom op 1100px en niet op 920px:
   daaronder past deze balk niet meer met de pijltjes erbij. */
.links .nav-link{
  display:inline-block;white-space:nowrap;
  font-size:13.5px;line-height:1.4;color:var(--ink-soft);
  padding:9px 14px;border-radius:999px;background:transparent;
  transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft);
}

/* Krappe bureaubladen: tussen 1101 en 1240 wordt alles een slag compacter,
   zodat de balk op één regel blijft zonder al bij 1240 om te klappen. */
@media (min-width:1101px) and (max-width:1240px){
  .links .nav-link{font-size:13px;padding:9px 10px}
  .nav-vouw{width:18px;margin-right:2px}
  .site-head .nav-cta .btn.primary{padding:12px 20px;font-size:13px}
  .site-head .wrap{padding:0 28px}
}
.links .nav-link:hover{color:var(--aubergine);background:rgba(74,52,97,.06)}
.links .nav-link.actief{color:var(--aubergine);background:rgba(74,52,97,.08)}
.heeft-sub .nav-link{padding-right:6px}

/* Het pijltje is een echte knop, geen versiering: op een aanraakscherm en met
   het toetsenbord is dat de enige manier om het paneel te openen zonder de link
   naar de hub kwijt te raken. */
.nav-vouw{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin:0 4px 0 0;padding:0;
  border:0;background:none;cursor:pointer;color:var(--ink-mist);
  border-radius:50%;
  transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
.nav-vouw:hover{color:var(--aubergine);background:rgba(74,52,97,.07)}
.nav-vouw:focus-visible{outline:2px solid var(--aubergine);outline-offset:2px}
.nav-vouw .chev{
  width:10px;height:7px;display:block;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.nav-item.open .chev,
.nav-item:focus-within .chev{transform:rotate(180deg)}
@media (hover:hover){
  .nav-item:hover .chev{transform:rotate(180deg)}
  .nav-item:hover .nav-link{color:var(--aubergine);background:rgba(74,52,97,.06)}
  .nav-item:hover .nav-vouw{color:var(--aubergine)}
}

/* ---------------------------------------------------------------------------
   3. Het uitklappaneel
   --------------------------------------------------------------------------- */

.subpaneel{
  position:absolute;top:100%;left:50%;
  width:min(var(--pw,420px), calc(100vw - 40px));
  margin-left:var(--shift,0px);
  /* De padding is de brug tussen de link en het paneel: zonder die strook gaat
     de muis door een dood gat en klapt het paneel dicht. Het zichtbare vlak
     begint pas bij .sub-binnen. */
  padding-top:13px;
  transform:translate(-50%,-8px) scale(.986);
  transform-origin:50% 0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease-soft), transform .22s var(--ease-soft), visibility 0s linear .22s;
}
.nav-item.open>.subpaneel,
.nav-item:focus-within>.subpaneel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0) scale(1);
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),
             transform .38s cubic-bezier(.22,.61,.36,1),
             visibility 0s;
}
@media (hover:hover){
  .nav-item:hover>.subpaneel{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,0) scale(1);
    transition:opacity .38s cubic-bezier(.22,.61,.36,1) .06s,
               transform .38s cubic-bezier(.22,.61,.36,1) .06s,
               visibility 0s;
  }
}

/* Het driehoekje dat het paneel aan zijn link vastknoopt. Staat op .subpaneel
   en niet op .sub-binnen, want die laatste heeft overflow:hidden nodig voor de
   waas in de hoek. Schuift het paneel opzij, dan blijft het driehoekje staan. */
.subpaneel::after{
  content:"";position:absolute;top:8px;left:calc(50% - var(--shift,0px));
  width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--paper);
  border-left:1px solid rgba(74,52,97,.10);
  border-top:1px solid rgba(74,52,97,.10);
  border-radius:3px 0 0 0;
}

/* Dekkend en niet doorschijnend. Een paneel met blur eronder is mooi tot het
   boven de hero hangt: die kop staat in 90px Cormorant en schemert er dan
   doorheen, ook bij 98% dekking. Op een uitvaartsite gaat leesbaarheid voor.
   De verloop en de waas hieronder houden het zacht. */
.sub-binnen{
  position:relative;overflow:hidden;
  background:linear-gradient(178deg, var(--paper) 0%, var(--paper-warm) 100%);
  border:1px solid rgba(74,52,97,.10);
  border-radius:26px 22px 28px 20px;
  box-shadow:0 34px 70px -34px rgba(42,35,48,.45), 0 4px 16px -10px rgba(42,35,48,.2);
  padding:22px 22px 16px;
}
/* Dezelfde zachte waas als in de secties, zodat het paneel bij de rest hoort. */
.sub-binnen::before{
  content:"";position:absolute;right:-40px;bottom:-70px;
  width:210px;height:210px;border-radius:50%;
  /* Stond op een verloop MET blur(26px) eroverheen. Dat is dubbelop: het
     verloop kan die verzachting zelf, en dan hoeft de browser er niets meer
     voor uit te rekenen. Extra stops in plaats van de filter. */
  background:radial-gradient(circle, rgba(184,196,173,.30) 0%, rgba(184,196,173,.24) 38%, rgba(184,196,173,.12) 58%, rgba(184,196,173,.04) 76%, transparent 92%);
  pointer-events:none;
}

.sub-kolommen{display:flex;gap:24px;position:relative}
.sub-kolom{flex:1 1 0;min-width:0}

.subpaneel .sub-kop{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:15.5px;line-height:1.3;letter-spacing:.01em;
  color:var(--teal);margin:0 0 5px;padding:0 10px;text-transform:none;
}

.subpaneel .sub-link{
  display:block;padding:8px 10px;border-radius:13px;
  font-size:13.5px;line-height:1.4;color:var(--ink);background:transparent;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft),
             background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.subpaneel .sub-titel{display:block;font-weight:400}
.subpaneel .sub-onder{
  display:block;font-size:12px;line-height:1.4;color:var(--ink-mist);margin-top:1px;
}
.nav-item.open .sub-link,
.nav-item:focus-within .sub-link{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 18ms + 70ms);
}
@media (hover:hover){
  .nav-item:hover .sub-link{
    opacity:1;transform:none;
    transition-delay:calc(var(--i,0) * 18ms + 90ms);
  }
}
.subpaneel .sub-link:hover{background:rgba(74,52,97,.07);color:var(--aubergine);transition-delay:0s}
.subpaneel .sub-link.hier{background:rgba(74,52,97,.09);color:var(--aubergine)}
.subpaneel .sub-link:focus-visible{outline:2px solid var(--aubergine);outline-offset:1px}

/* De radius en de achtergrond-bij-hover komen van `.links a` in home.css; die
   horen bij een pil in de balk, niet bij deze regel. Expliciet terugzetten. */
.subpaneel .sub-voet{
  display:flex;align-items:center;gap:6px;
  margin:14px 0 0;padding:12px 10px 2px;border-radius:0;
  background:transparent;
  border-top:1px solid rgba(74,52,97,.10);
  font-size:12.5px;letter-spacing:.02em;color:var(--teal);
  transition:color .35s var(--ease-soft);
}
.subpaneel .sub-voet:hover{color:var(--teal-deep);background:transparent}
.subpaneel .sub-voet span{display:inline-block;transition:transform .35s var(--ease-soft)}
.subpaneel .sub-voet:hover span{transform:translateX(3px)}
.subpaneel .sub-voet-bel{color:var(--aubergine)}
.subpaneel .sub-voet-bel b{font-weight:500;white-space:nowrap}
.subpaneel .sub-voet-bel:hover{color:var(--aubergine-deep)}

/* ---------------------------------------------------------------------------
   4. De kop op een telefoon en een tablet
   --------------------------------------------------------------------------- */

.nav-knop{display:none}
a.nav-cta-mob{display:none}

@media (max-width:1100px){
  /* De bovenbalk schuift het beeld uit en de dunne navigatiebalk blijft op nul
     hangen. Dat gaat zonder JavaScript: het hele omhulsel plakt op -42px. */
  /* Het logo is met opzet groter dan de contactknop ernaast: het merk hoort de
     zwaarste vorm in de banner te zijn, niet de knop. */
  .site-head{--nav-h:68px;--logo-h:48px;top:calc(0px - var(--topbar-h))}

  .site-head nav.main .wrap{
    position:relative;display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;
  }

  .nav-knop{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0 10px;margin-left:-8px;
    border:0;background:none;cursor:pointer;border-radius:999px;
    transition:background-color .35s var(--ease-soft);
  }
  @media (hover:hover){.nav-knop:hover{background:rgba(74,52,97,.06)}}
  .nav-knop:focus-visible{outline:2px solid var(--aubergine);outline-offset:2px}
  .nav-streep{
    display:block;height:1.5px;width:100%;border-radius:2px;background:var(--aubergine);
    transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .28s var(--ease-soft);
  }
  .nav-knop[aria-expanded="true"] .nav-streep:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-knop[aria-expanded="true"] .nav-streep:nth-child(2){opacity:0}
  .nav-knop[aria-expanded="true"] .nav-streep:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* Het logo hangt in het midden van de banner, los van de twee knoppen. De
     maximumbreedte houdt het van de contactknop af op een smal scherm.
     Let op de scoping: de voet heeft ook een <div class="brand">. Zonder
     .site-head ervoor gaat het logo in de voet zwerven op een telefoon. */
  .site-head .brand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    max-width:calc(100% - 200px);
  }
  .site-head .brand-logo{max-width:100%}

  .site-head .links{display:none}
  .site-head .nav-cta .btn.primary{display:none}
  a.nav-cta-mob{
    display:inline-flex;align-items:center;gap:6px;
    min-height:34px;padding:0 14px;border-radius:999px;
    background:var(--aubergine);color:#fff;
    font-size:12.5px;font-weight:400;letter-spacing:.01em;white-space:nowrap;
    transition:background-color .35s var(--ease-soft);
  }
  @media (hover:hover){.nav-cta-mob:hover{background:var(--aubergine-deep)}}
  .nav-cta-mob span{display:inline-block;transition:transform .35s var(--ease-soft)}
  .nav-cta-mob:hover span{transform:translateX(3px)}
}

@media (max-width:380px){
  .site-head nav.main .wrap{padding:0 12px}
  .site-head .brand{max-width:calc(100% - 178px)}
  a.nav-cta-mob{padding:0 13px;font-size:12.5px}
}

/* ---------------------------------------------------------------------------
   5. Het mobiele uitklapmenu

   De hover-regels hieronder staan met opzet achter @media (hover:hover). Een
   aanraakscherm houdt :hover vast na een tik: zonder die grens blijft er een
   grijs vlak achter op de knop waar je net op tikte, tot je ergens anders tikt.
   --------------------------------------------------------------------------- */

.mob-menu{
  position:absolute;left:0;right:0;top:100%;
  max-height:calc(100vh - 130px);
  max-height:calc(100dvh - 130px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility 0s linear .3s;
}
.mob-menu.is-open{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),
             transform .42s cubic-bezier(.22,.61,.36,1),
             visibility 0s;
}
/* Een zachte sluier over de pagina eronder, zodat het menu een eigen vlak is en
   niet in de tekst verdwijnt. Een klik erop landt op .mob-menu zelf en sluit
   het menu (zie kop.js).

   Let op waar de achtergrond van het menu staat: op .mob-binnen en níet op
   .mob-menu. Een ::after met z-index:-1 wordt geschilderd ná de achtergrond van
   zijn eigen element, dus met het wit op .mob-menu legde deze sluier zich over
   het menu zelf en werd het paneel grauw. Op .mob-binnen kan dat niet gebeuren:
   dat is in-flow inhoud en die komt altijd bovenop. */
.mob-menu::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:rgba(47,32,66,.30);
  opacity:0;transition:opacity .42s var(--ease-soft);
}
.mob-menu.is-open::after{opacity:1}

/* Boven 1100px bestaat dit menu niet; daar staat de gewone navigatie. */
@media (min-width:1101px){.mob-menu{display:none}}

.mob-binnen{
  position:relative;
  background:#fff;
  border-top:1px solid rgba(74,52,97,.08);
  box-shadow:0 30px 60px -30px rgba(42,35,48,.45);
  padding:10px 18px 20px;
}
.mob-lijst{list-style:none;margin:0;padding:0}
.mob-item{border-bottom:1px solid rgba(74,52,97,.08)}
.mob-item:last-child{border-bottom:0}
.mob-rij{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mob-menu .mob-link{
  flex:1 1 auto;display:block;padding:16px 4px;
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:25px;line-height:1.2;color:var(--aubergine);
  transition:color .35s var(--ease-soft);
}
.mob-menu .mob-link.actief{color:var(--teal)}
.mob-vouw{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--ink-mist);border-radius:50%;position:relative;
  transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
/* Een haarlijn links van het pijltje. De naam gaat sinds 2026-08-14 naar de
   hub en het pijltje vouwt uit; zonder die scheiding leest de rij als één knop
   en tikt iemand op de naam terwijl hij het rijtje eronder wil zien. De knop is
   daarom ook 52px in plaats van 44: hij is nu het énige raakvlak voor
   uitvouwen, en dat mag niet net te klein zijn voor een duim. */
.mob-vouw::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;
  background:rgba(74,52,97,.14);
}
@media (hover:hover){.mob-vouw:hover{background:rgba(74,52,97,.06);color:var(--aubergine)}}
.mob-vouw:focus-visible{outline:2px solid var(--aubergine);outline-offset:2px}
.mob-vouw .chev{width:12px;height:8px;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.mob-item.open .mob-vouw .chev{transform:rotate(180deg)}

/* 0fr naar 1fr geeft een vloeiende hoogte zonder een vaste maat te raden. */
.mob-sub{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s;
}
.mob-item.open .mob-sub{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.mob-sub-binnen{overflow:hidden;min-height:0;padding-left:2px}
.mob-sub-kop{
  display:block;padding:14px 8px 4px;
  font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;
  letter-spacing:.01em;color:var(--teal);
}
.mob-menu .mob-sub-link{
  display:block;padding:12px 12px;margin-bottom:1px;border-radius:12px;
  font-size:16.5px;line-height:1.4;color:var(--ink-soft);
  transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
@media (hover:hover){.mob-menu .mob-sub-link:hover{background:rgba(74,52,97,.06);color:var(--aubergine)}}
.mob-menu .mob-sub-link.hier{background:rgba(74,52,97,.09);color:var(--aubergine)}
.mob-sub-binnen>.mob-sub-link:last-child{margin-bottom:12px}

/* Achter een open menu wordt niet gescrold. Dit slot staat op html en NIET op
   body. home.css zet `overflow-x:clip` op de wortel; daarmee geeft body zijn
   overflow niet meer door aan het kijkvenster maar geldt hij voor body zelf.
   Body wordt dan een scrollcontainer die niet scrollt, en de vastgezette kop
   plakt daarbinnen op de bovenkant van het document in plaats van bovenaan het
   scherm. Zie kop.js bij zetMenu voor de meting. */
html.mob-menu-open{overflow:hidden}

/* De banner is doorschijnend papier (home.css: rgba(250,245,236,.78)). Met de
   sluier erachter schijnt die er dwars doorheen en wordt de kop grauw, terwijl
   het menu eronder wit is. Zolang het menu open staat is de banner daarom ook
   wit: kop en menu lezen dan als één vel. */
body.mob-menu-open .site-head nav.main{background:#fff}

/* ---------------------------------------------------------------------------
   6. De actiebalk onderaan
   --------------------------------------------------------------------------- */

/* home.css laat de mobiele balk tot 900px zien; de kop wisselt bij 920px. Die
   twee grenzen gelijktrekken, anders valt de balk tussen 901 en 920 weg. */
@media (max-width:1100px){
  .erika-stickybar{display:grid}
  body{padding-bottom:58px}
}
.sb-nr{display:none}

@media (min-width:1101px){
  /* Geen balk van rand tot rand maar een klein eiland, gecentreerd boven de
     onderrand. Onzichtbaar tot kop.js hem opzet, na 400px scrollen. */
  .erika-stickybar{
    display:flex;align-items:center;
    left:50%;right:auto;bottom:22px;width:auto;
    gap:4px;padding:5px;
    background:rgba(250,245,236,.97);
    border:1px solid rgba(74,52,97,.12);
    border-radius:999px;
    box-shadow:0 24px 46px -28px rgba(42,35,48,.55);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(-50%,14px);
    transition:opacity .5s var(--ease-soft),
               transform .5s cubic-bezier(.22,.61,.36,1),
               visibility 0s linear .5s;
  }
  .erika-stickybar.is-zichtbaar{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,0);
    transition:opacity .5s var(--ease-soft),
               transform .5s cubic-bezier(.22,.61,.36,1),
               visibility 0s;
  }
  /* Bij de voet staan alle gegevens al; dan hoeft dit eiland er niet meer bij. */
  .erika-stickybar.bij-voet{
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(-50%,10px);
    transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft), visibility 0s linear .4s;
  }

  .erika-stickybar .sb-item{
    min-height:38px;padding:0 15px;gap:8px;border-radius:999px;
    font-size:13px;font-weight:400;letter-spacing:.01em;
    background:transparent;color:var(--ink-soft);
    transition:background-color .35s var(--ease-soft), color .35s var(--ease-soft);
  }
  .erika-stickybar svg{width:15px;height:15px}

  .erika-stickybar .sb-bel{order:1}
  .erika-stickybar .sb-contact{order:3;background:var(--aubergine);color:#fff;padding:0 18px}

  .erika-stickybar .sb-bel:hover{background:rgba(74,52,97,.08);color:var(--aubergine)}
  .erika-stickybar .sb-contact:hover{background:var(--aubergine-deep)}

  /* Op desktop is "Bellen" een lege mededeling: je klikt niet, je leest het
     nummer. Het woord eruit, het nummer erin. */
  /* In het eiland is geen ruimte voor twee regels. "Bij een overlijden" blijft
     wel staan, want zonder die woorden belooft een zwevend nummer onderin het
     scherm dat Erika altijd voor alles te bellen is; voor overige vragen is dat
     10.00 tot 17.00 uur. Het woord "Bellen" valt hier weg: het nummer ernaast
     zegt dat al. */
  .erika-stickybar .sb-bel>span:not(.sb-nr):not(.sb-stapel){display:none}
  .erika-stickybar .sb-bel .sb-actie{display:none}
  .erika-stickybar .sb-bel .sb-stapel{flex-direction:row;align-items:center}
  .erika-stickybar .sb-waarvoor{font-size:13px;opacity:.72}
  .erika-stickybar .sb-kort{display:none}
  .erika-stickybar .sb-lang{display:inline}
  .erika-stickybar .sb-waarvoor::after{content:'·';margin:0 7px;opacity:.5}
  .sb-nr{display:inline;white-space:nowrap}

  body{padding-bottom:0}
}

/* ---------------------------------------------------------------------------
   7. Minder beweging
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .site-head .topbar,
  .site-head nav.main .wrap,
  .brand-logo,
  .subpaneel,
  .subpaneel .sub-link,
  .mob-menu,
  .mob-sub,
  .nav-streep,
  .chev,
  .erika-stickybar{transition-duration:.01ms!important;transition-delay:0s!important}
  .subpaneel{transform:translate(-50%,0)}
  .subpaneel .sub-link{transform:none}
  .mob-menu{transform:none}
}