/* Dienstpaginatype (16 pagina's).
 *
 * Opmaak LETTERLIJK uit het ontwerp:
 *   ruw/uve template individuele dienstpaginas - Uitvaartverzorging sectie herontwerp/
 *   export-dienstpagina/_plat/dienst-onderdelen.html
 *
 * Drie wijzigingen ten opzichte van dat bestand, alle drie voorgeschreven door
 * de README van de export of door de werkwijze:
 *   1. container-query -> media query. Het ontwerp gebruikt
 *      container-type:inline-size met @container (max-width:720px) omdat het
 *      canvas 1280 en 390 naast elkaar toont. Op de site is er maar een breedte,
 *      dus dit is een gewone media query op dezelfde 720px geworden.
 *      Het raster is expliciet (minmax/1fr), geen auto-fit, dus het klapt precies
 *      op die 720px om. Nagemeten, zie werk/04-archief/fase4-bouwverslagen/f4s2-dienstsjabloon-thema-2026-08-12.md.
 *   2. .dienst-voet en .dienst-merk uit de export zijn hier weg. Dat waren de
 *      dummy-voetstrook en de canvaslabels ("Onderdeel 1 · /crematie/"); de
 *      README schrijft dat die niet meegaan.
 *   3. footer::before krijgt de eindkleur van de bel-band (#24463f), zodat de
 *      voetgolf van het thema zonder streep aansluit. Zie de werkwijze,
 *      hoofdstuk "De naden tussen de secties".
 *
 * Tokens en keyframes (erika-drift, erika-drift2, erika-morph, --hairline,
 * --blob-1, --ease-soft, --whatsapp) komen uit tokens-erika.css; die laadt als
 * dependency voor dit bestand.
 */

.dienst{font-family:var(--font-body);font-weight:300;color:var(--ink-soft);background:var(--paper)}
.dienst a:focus-visible,.dienst summary:focus-visible{outline:2px solid var(--aubergine);outline-offset:3px;border-radius:6px}

/* ---------- de vier banden ---------- */
.dienst-sec{position:relative;overflow:hidden}
.dienst-kop{background:var(--paper);padding:104px 0 130px}
/* Band 2 staat optisch niet gecentreerd bij symmetrische padding, en dat valt
   op zodra de band kort is. De crèmekleur begint namelijk niet op de sectierand:
   de eigen golf is papierkleur en dekt de bovenste ~48px af, terwijl de golf van
   de leesband eronder crème is en juist ~72px ONDER de sectierand doorloopt.
   Netto staat de tekst dan 70px onder het crème maar 198px erboven. Deze padding
   verrekent dat verschil; de bandhoogte blijft gelijk (118+126 = 182+62). */
.dienst-inhoud{background:var(--dienst-inhoud-kleur, var(--cream));padding:182px 0 62px}
.dienst-lezen{background:var(--paper);padding:118px 0 64px}
.dienst-bel{padding:132px 0 96px;background:radial-gradient(900px 520px at 22% 12%, rgba(90,138,128,.32), transparent 68%), linear-gradient(155deg, var(--teal-deep) 0%, #2f5b53 55%, #24463f 100%)}
.dienst-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 44px}
.dienst-gloed{position:absolute;inset:0;pointer-events:none;z-index:0}
.dienst-vlek{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.dienst-vlek-a{width:300px;height:300px;right:6%;top:12%;background:radial-gradient(circle,var(--lila-light) 0%,rgba(232,222,240,0) 70%);opacity:.65;animation:erika-drift 22s ease-in-out infinite}
.dienst-vlek-b{width:260px;height:260px;left:3%;bottom:14%;background:radial-gradient(circle,var(--teal-mist) 0%,rgba(216,228,223,0) 70%);opacity:.55;animation:erika-drift2 26s ease-in-out infinite}
.dienst-vlek-c{width:280px;height:280px;left:6%;top:16%;background:radial-gradient(circle,var(--rose-light) 0%,rgba(240,224,226,0) 70%);opacity:.5;animation:erika-drift 24s ease-in-out infinite}

/* De uitdoving over de laatste 120px, met de laatste 22% vlak. Zonder die
   vlakke staart verschilt de laatste beeldrij een eenheid van de eerste rij
   eronder en meet de naad alsnog boven de 2. */
.dienst-uitdoof{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none}

/* Uitdoving aan de BOVENKANT, alleen nodig als band 2 ontbreekt en de leesband
   dus rechtstreeks op de kop volgt. Er is dan geen golf die de bovenrand
   afdekt, en de gloed van de leesband (radial op 16% 34%, verticale straal
   260px) kleurt die rand lila terwijl de kop er kaal papier eindigt. Gemeten
   verschil zonder deze regel: 2,6 op 1280px en 4,5 op 390px. Zelfde vorm als de
   onderkant, dus de eerste 22% vlak. */
.dienst-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%)}
.dienst-uitdoof-paper{background:linear-gradient(to bottom, rgba(250,245,236,0) 0%, rgba(250,245,236,1) 78%, rgba(250,245,236,1) 100%)}
.dienst-uitdoof-teal{background:linear-gradient(to bottom, rgba(36,70,63,0) 0%, rgba(36,70,63,1) 78%, rgba(36,70,63,1) 100%)}
.dienst-uitdoof-cream{background:linear-gradient(to bottom, rgb(from var(--dienst-inhoud-kleur, #f1e8d8) r g b / 0) 0%, var(--dienst-inhoud-kleur, #f1e8d8) 78%, var(--dienst-inhoud-kleur, #f1e8d8) 100%)}

/* De golf zit aan de BOVENKANT van de band waar hij bij hoort. Daardoor kan
   band 2 (dienst-inhoud) wegvallen zonder dat er een golf overblijft. */
.dienst-golf{position:absolute;left:0;top:-1px;width:100%;height:110px;display:block;z-index:2;pointer-events:none}

/* ---------- band 1: kop ---------- */
.dienst-kruimel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;letter-spacing:.02em;color:var(--ink-mist)}
.dienst-kruimel a{color:var(--ink-mist);text-decoration:none;transition:color .35s var(--ease-soft)}
.dienst-kruimel a:hover{color:var(--aubergine)}
.dienst-h1{font-family:var(--font-display);font-weight:400;margin:26px 0 0;font-size:52px;line-height:1.06;letter-spacing:var(--tracking-display);color:var(--aubergine);max-width:16em}
.dienst-lead{margin:30px 0 0;max-width:34em;font-size:20px;line-height:1.8;font-weight:300;color:var(--ink);text-wrap:pretty}
.dienst-p{margin:20px 0 0;max-width:36em;font-size:17px;line-height:1.85;font-weight:300;color:var(--ink-soft);text-wrap:pretty}
.dienst-link{font-style:italic;color:inherit;text-decoration:none}
/* Terzijde: cursief tekstblok onder de intro, met een vette kop. Toegevoegd
   2026-08-31 voor "Melding naar andere organisaties" op /akte-van-overlijden/.

   Géén rand en géén vlak, met opzet. De eerste versie had een streep links.
   Gemeten op 1280: het blok stond op x=230 en de eerste letter op x=408, want
   variant A (dienst-kop-grid-solo) centreert zijn tekst. Dat gaf een losse
   streep met 178px niets ernaast. Uitlijning erven en alleen met cursief, kleur
   en ruimte onderscheiden werkt in beide kopvarianten, ook die mét beeld, die
   juist links uitlijnt. Zet hier dus geen text-align of border terug. */
.dienst-terzijde{margin:34px auto 0;max-width:34em}
.dienst-terzijde-kop{margin:0;font-size:17px;line-height:1.6;font-weight:500;font-style:italic;color:var(--aubergine)}
.dienst-terzijde-tekst{margin:8px 0 0;font-size:16.5px;line-height:1.8;font-weight:300;font-style:italic;color:var(--ink-soft);text-wrap:pretty}
.dienst-kop-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center}
.dienst-kop-grid-solo{display:block}
.dienst-beeld{justify-self:center;width:100%;max-width:360px;aspect-ratio:1/1;border-radius:var(--blob-1);overflow:hidden;background:var(--lila-light);box-shadow:var(--shadow-soft);animation:erika-morph 24s ease-in-out infinite;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.dienst-beeld img{width:100%;height:100%;object-fit:cover;display:block}
/* De binnenmarge is voor het placeholder-label; met een foto erin gaf hij een lila rand en harde fotohoeken binnen de blob (2026-10-30). */
.dienst-beeld:has(img){padding:0}
.dienst-beeld-tekst{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.4;color:var(--aubergine-soft)}

/* ---------- band 2: inhoud, drie varianten ---------- */
.dienst-h2{font-family:var(--font-display);font-weight:400;margin:0;font-size:38px;line-height:1.1;letter-spacing:var(--tracking-display);color:var(--aubergine)}
.dienst-blok + .dienst-blok{margin-top:72px}
.dienst-blok-tekst{max-width:38em}

/* Drie pagina's hebben een lijst zonder kop erboven (opbaren, kistdragers,
   crematorium): daar staat in de content geen H2. Het ontwerp kent dat geval
   niet, want daar heeft elk blok een kop. Zonder deze regel houdt de lijst de
   bovenmarge die bij een kop hoort en zweeft hij los onder de golf.
   Dit is opmaak; de ontbrekende koppen zelf zijn een contentkeuze en staan als
   openstaand punt in werk/04-archief/fase4-bouwverslagen/f4s2-dienstsjabloon-thema-2026-08-12.md. */
.dienst-blok:not(:has(.dienst-h2)) > .dienst-uitleg,
.dienst-blok:not(:has(.dienst-h2)) > .dienst-opsom,
.dienst-blok:not(:has(.dienst-h2)) > .dienst-adres{margin-top:0}

/* variant B, uitleglijst (opbaren, kistdragers, crematie, resomeren) */
.dienst-uitleg{display:flex;flex-direction:column;margin:32px 0 0;border-top:1px solid var(--hairline);max-width:42em}
.dienst-uitleg-rij{padding:22px 2px;border-bottom:1px solid var(--hairline)}
.dienst-uitleg-term{font-family:var(--font-display);font-size:23px;line-height:1.3;color:var(--aubergine);display:block}
.dienst-uitleg-tekst{display:block;margin-top:8px;font-size:16.5px;line-height:1.8;color:var(--ink-soft)}

/* variant B, opsomming (voorbespreking, budget-uitvaart, natuurbegraafplaats) */
.dienst-opsom{display:flex;flex-direction:column;gap:2px;margin:30px 0 0;padding:0;list-style:none;max-width:40em}
.dienst-opsom-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:11px 2px;font-size:16.5px;line-height:1.75;color:var(--ink-soft)}
.dienst-opsom-item + .dienst-opsom-item{border-top:1px solid var(--hairline)}
.dienst-blad{width:9px;height:9px;background:var(--teal);border-radius:50% 0 50% 50%;transform:rotate(-30deg);display:block}
.dienst-totaal{margin:34px 0 0;font-family:var(--font-display);font-size:26px;line-height:1.4;color:var(--aubergine)}

/* Plusje in plaats van blaadje, alleen op een lijst die OPTELT tot een geheel.
   Op /kosten/ staat er wat er in het basistarief zit: dit plus dat plus dat.
   Een blaadje versiert daar alleen; een plus zegt wat de lijst doet.
   Eigen klasse in plaats van een override op .dienst-blad, zodat de andere drie
   opsommingen (voorbespreking, budget-uitvaart, natuurbegraafplaats) niets
   merken.
   Twee kruisende balken als achtergrondlaag: geen extra element in de HTML,
   geen icoonfont, en hij schaalt mee met de kleur van het thema.
   align-items:start in plaats van de baseline van .dienst-opsom-item, want op
   390px breekt de helft van de regels af en dan hoort de plus bij de EERSTE
   regel te staan. De marge centreert hem optisch op die regel (regelhoogte
   16,5 x 1,75 = 28,9; midden op 14,4; halve plus is 6,5). */
.dienst-opsom-item:has(.dienst-plus){align-items:start}
.dienst-plus{display:block;width:13px;height:13px;margin-top:8px;
  background-image:linear-gradient(var(--teal),var(--teal)),linear-gradient(var(--teal),var(--teal));
  background-size:13px 1.5px,1.5px 13px;
  background-position:center,center;
  background-repeat:no-repeat}

/* Optionele knop onder de laatste blok van band 2, zie page-dienst.php.
   De onderpadding van de band zelf is maar 62px en daar loopt de golf van band
   3 doorheen; zonder deze extra ruimte staat de knop met zijn schaduw op die
   golf. */
.dienst-inhoud-knop{display:flex;justify-content:center;margin-top:56px;padding-bottom:20px}
/* Fotostrook onderaan band 2. Vormen wisselen tussen de drie blobs; geen morph-animatie, want vier bewegende vormen naast elkaar is onrustig. */
.dienst-fotos{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:72px}
.dienst-foto{margin:0;flex:1 1 0;max-width:196px;aspect-ratio:1/1;overflow:hidden;border-radius:var(--blob-1);background:var(--lila-light);box-shadow:var(--shadow-soft)}
.dienst-foto:nth-child(3n+2){border-radius:var(--blob-2)}
.dienst-foto:nth-child(3n+3){border-radius:var(--blob-3)}
.dienst-foto:only-child{flex:0 1 300px;max-width:300px}
.dienst-foto img{width:100%;height:100%;object-fit:cover;display:block}
.dienst-fotos-bron{margin:18px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* variant C, adressen (begraafplaats, crematorium) */
.dienst-adres{display:flex;flex-direction:column;margin:32px 0 0;border-top:1px solid var(--hairline);max-width:46em}
.dienst-adres-rij{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 12px;border-bottom:1px solid var(--hairline);border-radius:14px 10px 14px 10px;text-decoration:none;transition:transform .35s var(--ease-soft),background-color .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}
/* De kleur staat er expliciet bij omdat het moederthema een a:hover-regel heeft
   die de rij blauw kleurt (rgb(33,83,135), gemeten met hovertest.cjs). Zichtbaar
   werd dat niet, want naam, adres en toevoeging hebben alle drie een eigen
   kleur, maar dan hangt de opmaak af van een regel die dit thema niet beheert. */
.dienst-adres-rij:hover{transform:translateY(-3px);background-color:rgba(255,255,255,.62);box-shadow:var(--shadow-soft);color:var(--ink-soft)}
.dienst-adres-rij:hover .dienst-adres-naam{color:var(--aubergine-deep)}
.dienst-adres-naam{font-family:var(--font-display);font-size:21px;line-height:1.35;color:var(--aubergine)}
.dienst-adres-plek{font-size:16px;line-height:1.7;color:var(--ink-soft)}
.dienst-adres-extra{color:var(--ink-mist)}

/* ---------- band 3: vragen en verder lezen ---------- */
.dienst-faq{display:flex;flex-direction:column;margin:34px 0 0;max-width:46em}
.dienst-faq-item{border-bottom:1px solid var(--hairline)}
.dienst-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 2px;cursor:pointer;list-style:none}
.dienst-faq-item summary::-webkit-details-marker{display:none}
.dienst-faq-vraag{margin:0;font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1.35;color:var(--ink)}
.dienst-chevron{flex:none;width:11px;height:11px;border-right:1.2px solid var(--aubergine-soft);border-bottom:1.2px solid var(--aubergine-soft);transform:rotate(45deg);transition:transform .35s var(--ease-soft)}
.dienst-faq-item[open] .dienst-chevron{transform:rotate(225deg)}
.dienst-faq-antwoord{margin:0;padding:0 2px 26px;font-size:16.5px;line-height:1.85;color:var(--ink-soft);max-width:38em;text-wrap:pretty}
.dienst-verder{max-width:46em;margin:56px auto 0;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:20px}
.dienst-verder-label{margin:0;font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.3;color:var(--aubergine);text-align:center}
.dienst-verder-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dienst-verder-links a{display:inline-flex;align-items:center;min-height:40px;padding:9px 18px;border-radius:999px;border:1px solid rgba(74,52,97,.3);background:rgba(255,255,255,.45);color:var(--aubergine);font-size:14.5px;text-decoration:none;transition:transform .35s var(--ease-soft),background-color .35s var(--ease-soft)}
.dienst-verder-links a:hover{transform:translateY(-2px);background-color:#fff}
.dienst-verder-punt{display:none}

/* ---------- band 4: bel ---------- */
.dienst-bel-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}
.dienst-bel-label{display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.08);color:#cfe0da;font-size:11.5px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:500}
.dienst-bel-blad{width:9px;height:9px;background:#b8d4ca;border-radius:50% 0 50% 50%;transform:rotate(-30deg);display:block}
a.dienst-bel-nr{margin-top:40px;font-family:var(--font-display);font-size:54px;line-height:1.1;color:#fff;text-decoration:none;letter-spacing:.02em;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.45);transition:color .35s var(--ease-soft)}
.dienst-bel-nr:hover{color:#eaf3ef}
.dienst-bel-sub{margin:20px 0 0;font-size:11.5px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.62)}
.dienst-bel-kop{font-family:var(--font-display);font-weight:400;margin:34px 0 0;font-size:46px;line-height:1.12;letter-spacing:var(--tracking-display);color:#fff}
.dienst-bel-kop em{font-style:italic;color:#b8d4ca}
.dienst-bel-p{margin:26px 0 0;max-width:32em;font-size:16.5px;line-height:1.85;font-weight:300;color:rgba(255,255,255,.78);text-wrap:pretty}
.dienst-bel-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:42px}
.dienst-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)}
a.dienst-knop-wit{background:#fff;color:var(--teal-deep)}
.dienst-knop-wit:hover{transform:translateY(-2px);background:#eaf3ef}
.dienst-bel-vlek{--kern:260px;position:absolute;width:790px;height:790px;right:-285px;bottom:-355px;border-radius:50%;background:rgba(216,228,223,.1);filter:blur(70px);animation:erika-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)) {
  .dienst-bel-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))) }
}

/* ---------- uitlijning per band ---------- */
.dienst-kop .dienst-wrap{max-width:1120px;padding:0 72px}
.dienst-kop-grid{gap:80px}
.dienst-kop-grid-solo{text-align:center;max-width:820px;margin:0 auto}
.dienst-kop-grid-solo .dienst-h1,.dienst-kop-grid-solo .dienst-lead,.dienst-kop-grid-solo .dienst-p{margin-left:auto;margin-right:auto}
.dienst-kop:has(.dienst-kop-grid-solo) .dienst-kruimel{justify-content:center}

/* Ontbreekt band 2, dan schuiven kop en leesband tegen elkaar aan op dezelfde
   grondkleur. Deze dunne uitdovende lijn markeert die overgang; er is dan geen
   golf, want de golf hoort bij de band eronder en die band is er niet. */
.dienst-kop + .dienst-lezen::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(560px,72%);height:1px;z-index:3;background:linear-gradient(90deg,rgba(212,199,178,0) 0%,var(--hairline) 26%,var(--hairline) 74%,rgba(212,199,178,0) 100%)}

.dienst-inhoud .dienst-h2,.dienst-lezen .dienst-h2{text-align:center}
.dienst-inhoud .dienst-wrap,.dienst-lezen .dienst-wrap{max-width:900px}
.dienst-inhoud .dienst-blok-tekst{margin-left:auto;margin-right:auto}
.dienst-inhoud .dienst-uitleg,.dienst-inhoud .dienst-adres,.dienst-inhoud .dienst-opsom,.dienst-lezen .dienst-faq{margin-left:auto;margin-right:auto}
.dienst-inhoud .dienst-p,.dienst-lezen .dienst-faq-antwoord{margin-left:auto;margin-right:auto}
.dienst-inhoud .dienst-totaal{text-align:center}
.dienst-lezen .dienst-verder{justify-content:center}

/* ---------- het enige breekpunt: 720px ---------- */
@media (max-width:720px){
  .dienst-kop{padding:64px 0 84px}
  .dienst-inhoud{padding:115px 0 45px} /* zelfde verrekening, met golven van 64px */
  .dienst-lezen{padding:76px 0 44px}
  .dienst-bel{padding:88px 0 72px}
  .dienst-wrap{padding:0 24px}
  .dienst-bel-inner{padding:0 24px}
  .dienst-kop .dienst-wrap{padding:0 32px}
  .dienst-kop-grid{grid-template-columns:1fr;gap:40px}
  .dienst-beeld{order:2;max-width:calc(100% - 32px);margin-left:auto;margin-right:auto}
  .dienst-h1{font-size:36px;margin-top:20px}
  .dienst-lead{font-size:18px;margin-top:24px}
  .dienst-p{font-size:16.5px}
  .dienst-h2{font-size:29px}
  .dienst-blok + .dienst-blok{margin-top:52px}
  .dienst-uitleg-term{font-size:21px}
  .dienst-inhoud-knop{margin-top:44px;padding-bottom:6px}
  .dienst-fotos{gap:16px;margin-top:52px}
  .dienst-foto{flex:0 0 calc(50% - 8px);max-width:none}
  .dienst-foto:only-child{flex:0 0 78%;max-width:none}
  .dienst-adres-rij{grid-template-columns:1fr;gap:4px}
  .dienst-faq-vraag{font-size:19px}
  .dienst-verder{margin-top:48px;padding-top:28px;gap:16px}
  .dienst-verder-label{font-size:21px}
  .dienst-verder-links{gap:8px}
  .dienst-verder-links a{min-height:36px;padding:7px 14px;font-size:13.5px}
  a.dienst-bel-nr{font-size:38px;margin-top:32px}
  .dienst-bel-kop{font-size:31px;margin-top:28px}
  .dienst-golf{height:64px}
}

@media (prefers-reduced-motion:reduce){.dienst *{animation:none !important}}

/* De voetgolf van het thema krijgt de eindkleur van de bel-band, anders staat
   er een streep boven de voet. Zelfde regel als contact.css en watwijdoen.css.
   Deze stylesheet laadt alleen op dienstpagina's, dus dit mag kaal. */
footer::before{background:#24463f}

/* 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. */
.dienst-bel-p a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color var(--dur-color) var(--ease-soft)}
.dienst-bel-p a:hover{text-decoration-color:#fff}