/* ==========================================================================
   Uitvaartzorg Oantinken (verzonnen uitvaartverzorger in Dronrijp) · voorbeeld van NorthByte
   Typografie: EB Garamond (koppen, met cursief) en Source Sans 3 (tekst, groot
   en goed leesbaar, ook voor oudere bezoekers).
   Kleuren: zacht papier, steen, diep veengroen en een vleugje messing.
   Vormtaal: rust. Veel ruimte, boogvormen als een raam, dunne lijnen, geen
   drukte. Het 24-uursnummer staat altijd in beeld.
   Beweging: bewust bijna niets. Alleen een zachte opacity bij het wisselen van
   stappen en bij in beeld komen. Geen verschuivingen, geen effecten.
   ========================================================================== */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/eb-garamond-var-latin.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(fonts/eb-garamond-var-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-3-var-latin.woff2) format("woff2"); }

:root {
  --papier: #f6f3ee;
  --steen: #ebe6dd;
  --steen-2: #ded7cb;
  --linnen: #fcfbf8;
  --veen: #24332d;
  --veen-2: #31443c;
  --mos: #4d6357;
  --messing: #a8834f;
  --messing-licht: #d8c29c;
  --tekst: #262824;
  --grijs: #5c5f58;
  --lijn: rgba(38, 40, 36, .14);
  --kop: "EB Garamond", Garamond, Georgia, serif;
  --romp: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: 16px;
  --vb-scroll-top: 96px;
  color-scheme: light;
}
@media (min-width: 760px) { :root { --rand: 32px; } }

html { background: var(--papier); }
body { background: var(--papier); color: var(--tekst); font: 400 18.5px/1.7 var(--romp); }
::selection { background: var(--steen-2); color: var(--tekst); }

.rand { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

h1, h2, h3 { font-family: var(--kop); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
h1 em, h2 em { font-style: italic; color: var(--mos); }
h3 { font-size: 1.6rem; }
h1, h2 { text-wrap: balance; }

.label { display: block; margin-bottom: 14px; font: 600 13px/1.3 var(--romp); letter-spacing: .14em; text-transform: uppercase; color: var(--mos); }
.label-licht { color: var(--messing-licht); }

/* Bewust geen verschuiving bij in beeld komen: alleen een zachte opacity */
@media (prefers-reduced-motion: no-preference) {
  .vb-js [data-in], .vb-js [data-in="links"], .vb-js [data-in="rechts"], .vb-js [data-in="schaal"] { transform: none; transition: opacity 1.2s ease; transition-delay: var(--vb-d, 0ms); }
}

/* ----- Knoppen ----- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px;
  border: 1.5px solid var(--veen); border-radius: 4px; background: var(--veen); color: var(--papier);
  font: 600 17px/1.2 var(--romp); text-decoration: none; text-align: center; transition: background-color .25s, color .25s, border-color .25s;
}
.knop:hover { background: var(--veen-2); border-color: var(--veen-2); }
.knop-lijn { background: transparent; color: var(--veen); }
.knop-lijn:hover { background: var(--steen); color: var(--veen); border-color: var(--veen); }
.knop-licht { background: var(--papier); color: var(--veen); border-color: var(--papier); }
.knop-licht:hover { background: var(--steen); border-color: var(--steen); color: var(--veen); }
.knop-klein { min-height: 44px; padding: 0 18px; font-size: 16px; }
.knop-breed { width: 100%; }
:where(.knop, a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--messing); outline-offset: 3px; }

/* ----- Altijd bereikbaar ----- */
.dag-nacht { background: var(--veen); color: #e5e1d8; font-size: 15.5px; line-height: 1.45; }
.dag-nacht-in { display: block; padding-top: 9px; padding-bottom: 9px; text-align: center; }
.dag-nacht a { color: #fff; font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }

/* ----- Kop ----- */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(246, 243, 238, .97); border-bottom: 1px solid var(--lijn); }
.kop-in { display: flex; align-items: center; gap: 28px; height: 84px; }
.logo { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; color: var(--veen); text-decoration: none; }
.logo-icoon { width: 28px; height: 35px; flex: none; }
.logo-tekst { display: flex; flex-direction: column; }
.logo-tekst b { font: 500 30px/1 var(--kop); letter-spacing: .01em; color: var(--veen); }
.logo-tekst small { margin-top: 4px; font: 600 11px/1.2 var(--romp); letter-spacing: .16em; text-transform: uppercase; color: var(--grijs); white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 26px; font-size: 17px; }
.menu a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .25s; }
.menu a:hover { border-bottom-color: var(--messing); }

.bel-knop {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 18px 6px 14px; border-radius: 4px;
  background: var(--veen); color: var(--papier); text-decoration: none; flex: none;
}
.bel-knop svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.bel-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.bel-tekst small { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--messing-licht); }
.bel-tekst b { font-size: 19px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bel-knop:hover { background: var(--veen-2); }

.menu-knop { display: none; width: 46px; height: 46px; border: 0; background: transparent; padding: 0; position: relative; flex: none; }
.menu-knop i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--veen); }
.menu-knop i:first-of-type { top: 19px; }
.menu-knop i:last-of-type { top: 26px; }
.menu-knop[aria-expanded="true"] i:first-of-type { top: 22.5px; transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] i:last-of-type { top: 22.5px; transform: rotate(-45deg); }

@media (max-width: 1080px) { .menu { gap: 18px; font-size: 16px; } .kop-in { gap: 20px; } }
@media (max-width: 979px) {
  .kop-in { height: 70px; gap: 8px; }
  .js .menu-knop { display: block; }
  .js .menu {
    position: fixed; left: 0; right: 0; top: var(--kop-onder, 70px); z-index: 49; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--rand) 22px; background: var(--papier); border-bottom: 1px solid var(--lijn); opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility 0s linear .25s;
  }
  .js .menu.is-open { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
  .js .menu a { padding: 14px 0; border-bottom: 1px solid var(--lijn); font: 400 25px/1.2 var(--kop); }
  html:not(.js) .kop-in { flex-wrap: wrap; height: auto; padding: 12px 0; }
  html:not(.js) .menu { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 18px; }
}
@media (max-width: 559px) {
  .dag-nacht { font-size: 14.5px; }
  .logo { gap: 9px; }
  .logo-icoon { width: 22px; height: 28px; }
  .kop-in { gap: 6px; }
  .logo-tekst b { font-size: 24px; }
  .logo-tekst small { font-size: 9px; letter-spacing: .1em; }
  .bel-knop { min-height: 50px; padding: 5px 10px 5px 9px; gap: 7px; }
  .menu-knop { width: 42px; margin-right: -6px; }
  .menu-knop i { left: 10px; right: 10px; }
  .bel-knop svg { width: 20px; height: 20px; }
  .bel-tekst small { font-size: 10.5px; }
  .bel-tekst b { font-size: 16px; }
}
@media (max-width: 359px) { .bel-tekst small { display: none; } }

/* ----- Hero ----- */
.hero { padding: clamp(36px, 6vw, 84px) 0 clamp(56px, 8vw, 110px); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.012em; }
.hero-sub { margin-top: 22px; max-width: 34rem; font-size: 20px; color: var(--grijs); }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.geruststelling { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--lijn); display: grid; gap: 8px; }
.geruststelling li { position: relative; padding-left: 28px; font-size: 17px; }
.geruststelling li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 13px; height: 7px; border-left: 1.6px solid var(--mos); border-bottom: 1.6px solid var(--mos); transform: rotate(-45deg); }

.hero-beeld { position: relative; padding-bottom: 70px; }
.hero-beeld img { width: 100%; aspect-ratio: 760 / 940; object-fit: cover; border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px; background: var(--steen); }
.nu-kaart {
  position: absolute; left: -40px; right: 40px; bottom: 0; padding: 24px 26px 22px; background: var(--linnen);
  border: 1px solid var(--lijn); border-top: 3px solid var(--messing); border-radius: 4px;
}
.nu-kaart h2 { font-size: 1.7rem; line-height: 1.15; }
.nu-kaart p { margin-top: 8px; font-size: 17px; color: var(--grijs); line-height: 1.55; }
.nu-tel { display: inline-block; margin-top: 10px; font: 600 30px/1.1 var(--kop); color: var(--veen); text-decoration: none; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; border-bottom: 1.5px solid var(--messing); }
@media (max-width: 859px) {
  .hero { padding-top: 0; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-beeld { order: -1; margin: 0 calc(var(--rand) * -1); padding-bottom: 0; }
  .hero-beeld img { aspect-ratio: 720 / 600; max-height: 52svh; border-radius: 0; }
  .nu-kaart { position: relative; left: auto; right: auto; margin: -64px var(--rand) 0; }
  .hero-knoppen .knop { flex: 1 1 100%; }
}

/* ----- Secties ----- */
.sectie { padding: clamp(64px, 9vw, 120px) 0; }
.sectie-kop { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.sectie-sub { margin-top: 16px; font-size: 19.5px; color: var(--grijs); }

/* ----- Bij overlijden ----- */
.overlijden { background: var(--linnen); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.overlijden-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.situatie { margin-bottom: 30px; }
.situatie legend { margin-bottom: 12px; font: 400 23px/1.3 var(--kop); }
.situatie-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.situatie label { cursor: pointer; }
.situatie input, .keuze input, .vink input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.situatie span {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; border: 1.5px solid var(--steen-2); border-radius: 999px;
  background: var(--papier); font-size: 17.5px; transition: background-color .2s, border-color .2s, color .2s;
}
.situatie input:checked + span { background: var(--veen); border-color: var(--veen); color: var(--papier); }
.situatie input:focus-visible + span { outline: 3px solid var(--messing); outline-offset: 3px; }
html:not(.js) .situatie { display: none; }

.stappen { border-top: 1px solid var(--lijn); }
.stap { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 18px; padding: 24px 0; border-bottom: 1px solid var(--lijn); }
.stap-nr { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--messing); border-radius: 50%; font: 500 21px/1 var(--kop); color: var(--veen); }
.stap h3 { font-size: 1.55rem; line-height: 1.2; margin-top: 4px; }
.stap p { margin-top: 6px; color: #3e413b; }
.stap a { color: var(--veen); font-weight: 700; white-space: nowrap; }
.stappen.is-wissel .stap-tekst { animation: zacht .5s ease both; }
@keyframes zacht { from { opacity: .2; } }
/* Zonder JavaScript: alle situaties onder elkaar, met een kopje */
html:not(.js) .stap [data-s][hidden] { display: block !important; }
html:not(.js) .stap p[data-s]::before { display: block; font: 600 12.5px/1.4 var(--romp); letter-spacing: .1em; text-transform: uppercase; color: var(--mos); margin-top: 8px; }
html:not(.js) .stap p[data-s="thuis"]::before { content: "Thuis"; }
html:not(.js) .stap p[data-s="ziekenhuis"]::before { content: "In het ziekenhuis"; }
html:not(.js) .stap p[data-s="zorg"]::before { content: "In een zorginstelling"; }
html:not(.js) .stap h3[data-s="ziekenhuis"][hidden], html:not(.js) .stap h3[data-s="zorg"][hidden] { display: none !important; }
html:not(.js) .stap h3[data-s="thuis"]::after { content: " of de arts ter plaatse"; }

.niet-meteen { position: sticky; top: 120px; }
.niet-meteen-beeld img { width: 100%; aspect-ratio: 640 / 560; object-fit: cover; border-radius: 4px; }
.niet-meteen-tekst { margin-top: -1px; padding: 24px 24px 26px; background: var(--steen); border-radius: 0 0 4px 4px; }
.niet-meteen-tekst h3 { font-size: 1.6rem; }
.niet-meteen-tekst ul { margin: 14px 0 0; padding: 0; list-style: none; }
.niet-meteen-tekst li { position: relative; padding: 6px 0 6px 22px; font-size: 17px; line-height: 1.5; }
.niet-meteen-tekst li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 1.5px; background: var(--messing); }
.niet-meteen-tekst p { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(38, 40, 36, .16); font-size: 16px; color: var(--grijs); line-height: 1.55; }
@media (max-width: 959px) {
  .overlijden-in { grid-template-columns: minmax(0, 1fr); }
  .niet-meteen { position: static; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .niet-meteen-beeld img { height: 100%; aspect-ratio: auto; border-radius: 4px 0 0 4px; }
  .niet-meteen-tekst { margin: 0; border-radius: 0 4px 4px 0; }
}
@media (max-width: 599px) {
  .niet-meteen { grid-template-columns: minmax(0, 1fr); }
  .niet-meteen-beeld img { height: auto; aspect-ratio: 16 / 10; border-radius: 4px 4px 0 0; }
  .niet-meteen-tekst { border-radius: 0 0 4px 4px; }
  .stap { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; }
  .stap-nr { width: 36px; height: 36px; font-size: 18px; }
}

/* ----- Wensen vastleggen ----- */
.wensen-kop { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.wensen-kop .sectie-kop { margin-bottom: 0; }
.wensen-beeld { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; }
.wensen-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.wensen-form { padding: clamp(22px, 3vw, 36px); background: var(--linnen); border: 1px solid var(--lijn); border-radius: 4px; }
.wens-voortgang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 26px; }
.wens-voortgang button {
  width: 100%; min-height: 48px; padding: 8px 4px 0; border: 0; border-top: 3px solid var(--steen-2); background: transparent; text-align: left;
  font: 600 14px/1.3 var(--romp); color: var(--grijs);
}
.wens-voortgang span { display: block; font: 500 18px/1 var(--kop); color: var(--grijs); margin-bottom: 4px; }
.wens-voortgang button.is-gedaan { border-top-color: var(--mos); }
.wens-voortgang button[aria-current="step"] { border-top-color: var(--veen); color: var(--veen); }
.wens-voortgang button[aria-current="step"] span { color: var(--veen); }
.wens-stap + .wens-stap { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--lijn); }
.js .wens-stap + .wens-stap { margin-top: 0; padding-top: 0; border-top: 0; }
.wens-stap legend { margin-bottom: 14px; font: 400 27px/1.2 var(--kop); color: var(--veen); }
.wens-stap.is-in { animation: zacht .5s ease both; }
.vraag { margin: 18px 0 8px; font-weight: 600; font-size: 17px; }
.wens-stap legend + .vraag { margin-top: 0; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { cursor: pointer; }
.keuze span {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--steen-2); border-radius: 4px;
  background: var(--papier); font-size: 17px; line-height: 1.25; transition: background-color .2s, border-color .2s;
}
.keuze span::before { content: ""; flex: none; width: 16px; height: 16px; margin-right: 10px; border: 1.5px solid #8d8a82; border-radius: 50%; background: #fff; }
.keuze input:checked + span { border-color: var(--veen); background: #eef0eb; }
.keuze input:checked + span::before { background: var(--veen); border-color: var(--veen); box-shadow: inset 0 0 0 3px #fff; }
.keuze input:focus-visible + span { outline: 3px solid var(--messing); outline-offset: 2px; }
.veld { display: grid; gap: 6px; margin-top: 18px; }
.veld label { font-weight: 600; font-size: 16.5px; }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #c9c2b6; border-radius: 4px; background: #fff;
  font: 400 17.5px/1.35 var(--romp); color: var(--tekst);
}
.veld textarea { resize: vertical; min-height: 84px; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--veen); box-shadow: inset 0 0 0 1px var(--veen); }
.veld-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.vink { display: block; margin-top: 18px; cursor: pointer; }
.vink span { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.vink span::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #8d8a82; border-radius: 3px; background: #fff center / 14px no-repeat; }
.vink input:checked + span::before { background-color: var(--veen); border-color: var(--veen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3ee' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.vink input:focus-visible + span::before { outline: 3px solid var(--messing); outline-offset: 2px; }
.wens-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wens-knoppen [data-volgende], .wens-knoppen [data-bewaar] { margin-left: auto; }
.privacy-noot { margin-top: 16px; font-size: 15.5px; color: var(--grijs); }

.samenvatting { position: sticky; top: 120px; padding: 26px 26px 24px; background: var(--steen); border-radius: 4px; border-top: 3px solid var(--messing); }
.samenvatting h3 { font-size: 1.9rem; }
.sv-lijst { margin: 14px 0 0; }
.sv-lijst div { padding: 10px 0; border-bottom: 1px solid rgba(38, 40, 36, .14); }
.sv-lijst dt { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mos); }
.sv-lijst dd { margin: 2px 0 0; font: 400 19px/1.35 var(--kop); }
.sv-leeg { margin: 12px 0 0; color: var(--grijs); font-size: 16.5px; }
.samenvatting .knop { margin-top: 18px; }
@media (max-width: 959px) {
  .wensen-in { grid-template-columns: minmax(0, 1fr); }
  .samenvatting { position: static; }
}
@media (max-width: 599px) {
  .wensen-kop { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 16px; }
  .wensen-beeld { width: 96px; height: 96px; margin-top: 6px; }
  .wensen-kop .sectie-sub { grid-column: 1 / -1; }
  .wens-voortgang button { font-size: 0; }
  .wens-voortgang span { font-size: 18px; }
  .wens-voortgang button[aria-current="step"] { font-size: 13px; }
  .veld-rij { grid-template-columns: minmax(0, 1fr); }
  .wensen-form { margin: 0 calc(var(--rand) * -.5); }
}

/* ----- Kosten ----- */
.kosten { background: var(--linnen); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.geen-js { max-width: 44rem; padding: 22px 24px; background: var(--steen); border-radius: 4px; }
.geen-js p + p { margin-top: 8px; }
.js .geen-js { display: none; }
.kosten-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.kosten-keuze fieldset + fieldset { margin-top: 22px; }
.kosten-keuze legend { margin-bottom: 10px; font: 400 22px/1.3 var(--kop); }
.kosten-keuze .keuze span { min-height: 46px; padding: 0 14px; font-size: 16.5px; }
.kosten-uitkomst { position: sticky; top: 120px; padding: clamp(22px, 3vw, 34px); background: var(--papier); border: 1px solid var(--lijn); border-radius: 4px; }
.uitkomst-label { font: 600 13px/1.3 var(--romp); letter-spacing: .12em; text-transform: uppercase; color: var(--mos); }
.uitkomst-totaal { margin-top: 6px; font: 500 clamp(44px, 5vw, 60px)/1 var(--kop); color: var(--veen); font-variant-numeric: lining-nums tabular-nums; }
.posten { margin-top: 20px; border-top: 1px solid var(--lijn); }
.post-groep { margin-top: 16px; font: 600 12.5px/1.3 var(--romp); letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); }
.post { border-bottom: 1px solid var(--lijn); }
.post summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 17px; }
.post summary::-webkit-details-marker { display: none; }
.post summary::before { content: "+"; flex: none; width: 16px; color: var(--messing); font-weight: 600; }
.post[open] summary::before { content: "\2212"; }
.post-naam { flex: 1; }
.post-bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.post p { padding: 0 0 14px 28px; font-size: 16px; line-height: 1.55; color: var(--grijs); }
.kosten-mini { display: none; }
@media (max-width: 899px) {
  .js .kosten-mini {
    position: sticky; bottom: calc(var(--nb-balk-h, 0px) + 10px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 24px; padding: 12px 16px; border-radius: 4px; border: 1px solid rgba(246, 243, 238, .3); background: var(--veen); color: var(--papier); text-decoration: none; font-size: 16px;
  }
  .kosten-mini b { font: 600 24px/1 var(--kop); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
}
.kosten-noot { margin-top: 18px; font-size: 15.5px; line-height: 1.55; color: var(--grijs); }
@media (max-width: 899px) {
  .kosten-in { grid-template-columns: minmax(0, 1fr); }
  .kosten-uitkomst { position: static; }
}

/* ----- Over ons ----- */
.over { padding-top: 0; }
.regio-beeld img { width: 100%; height: clamp(220px, 34vw, 480px); object-fit: cover; }
.over-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(-120px, -8vw, -40px); }
.over-tekst { position: relative; padding: clamp(26px, 4vw, 48px); background: var(--papier); border-radius: 4px 4px 0 0; }
.over-tekst > p:not(.label) { margin-top: 16px; font-size: 19px; color: #3e413b; }
.anke img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }
.anke figcaption { margin-top: 10px; font-size: 16px; color: var(--grijs); }
.anke figcaption b { display: block; font: 500 24px/1.2 var(--kop); color: var(--tekst); }
@media (max-width: 859px) {
  .over-in { grid-template-columns: minmax(0, 1fr); margin-top: -36px; }
  .over-tekst { margin: 0 calc(var(--rand) * -.5); padding: 24px 18px; }
  .anke { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; }
  .anke figcaption { margin: 0; }
}

/* ----- Afscheidshuis ----- */
.afscheidshuis { padding-top: 0; }
.huis-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.huis-beeld { width: 100%; aspect-ratio: 1000 / 720; object-fit: cover; border-radius: 4px; }
.huis-feiten { margin-top: 20px; border-top: 1px solid var(--lijn); }
.huis-feiten li { padding: 14px 0; border-bottom: 1px solid var(--lijn); font-size: 17.5px; line-height: 1.55; }
.huis-feiten b { display: block; font: 500 21px/1.3 var(--kop); color: var(--veen); }
@media (max-width: 859px) { .huis-in { grid-template-columns: minmax(0, 1fr); } }

/* ----- Nazorg ----- */
.nazorg { background: var(--steen); }
.nazorg-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.nazorg-tekst > p:not(.label) { margin-top: 16px; font-size: 19px; color: #3e413b; max-width: 34rem; }
.nazorg-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media (max-width: 859px) { .nazorg-in { grid-template-columns: minmax(0, 1fr); } }

/* ----- Reviews ----- */
.reviews-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.score { font-size: 16.5px; color: var(--grijs); }
.score span { margin-left: 8px; padding: 3px 9px; border: 1px solid var(--lijn); border-radius: 3px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.review-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.review { padding-top: 22px; border-top: 2px solid var(--messing-licht); }
.review blockquote p { font: italic 400 22px/1.45 var(--kop); color: var(--tekst); }
.review-wie { margin-top: 14px; font-size: 15.5px; font-weight: 600; color: var(--mos); }
@media (max-width: 859px) { .review-lijst { grid-template-columns: minmax(0, 1fr); } }

/* ----- Vragen ----- */
.vragen { padding-top: 0; }
.vragen-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.vraag-lijst { border-top: 1px solid var(--lijn); }
.vraag-lijst details { border-bottom: 1px solid var(--lijn); }
.vraag-lijst summary { position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font: 400 22px/1.3 var(--kop); }
.vraag-lijst summary::-webkit-details-marker { display: none; }
.vraag-lijst summary::before, .vraag-lijst summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 15px; height: 1.5px; background: var(--veen); }
.vraag-lijst summary::after { transform: rotate(90deg); }
.vraag-lijst details[open] summary::after { display: none; }
.vraag-lijst details p { padding: 0 0 22px; max-width: 40rem; color: #3e413b; }
@media (max-width: 859px) { .vragen-in { grid-template-columns: minmax(0, 1fr); } .vragen .sectie-kop { margin-bottom: 0; } }

/* ----- Contact ----- */
.contact { position: relative; overflow: hidden; background: var(--veen); color: #e9e5dc; }
.contact-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.contact h2 { color: var(--papier); }
.contact h2 em { color: var(--messing-licht); }
.groot-tel { display: inline-block; margin-top: 22px; font: 500 clamp(42px, 6vw, 68px)/1 var(--kop); color: #fff; text-decoration: none; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; border-bottom: 2px solid var(--messing); padding-bottom: 6px; }
.contact-sub { margin-top: 16px; font-size: 19px; max-width: 30rem; color: #d9d4c8; }
.contact-adres { margin-top: 18px; font-size: 17px; color: #d9d4c8; }
.contact-adres a { color: #fff; }
.terugbel { padding: clamp(22px, 3vw, 32px); background: rgba(246, 243, 238, .06); border: 1px solid rgba(246, 243, 238, .2); border-radius: 4px; }
.terugbel h3 { color: var(--papier); font-size: 1.8rem; }
.terugbel-sub { margin-top: 6px; font-size: 16px; color: #cfc9bd; }
.terugbel .veld label { color: #e9e5dc; }
.terugbel .veld input, .terugbel .veld select { border-color: transparent; }
.terugbel .knop { margin-top: 22px; }
@media (max-width: 859px) {
  .contact-in { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Voet ----- */
.voet { padding: clamp(48px, 6vw, 72px) 0 calc(var(--nb-balk-h, 56px) + 24px); background: var(--papier); border-top: 1px solid var(--lijn); }
.voet-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.logo-voet { margin: 0 0 12px; }
.voet-tekst { max-width: 22rem; color: var(--grijs); font-size: 16.5px; }
.voet .voet-kop { margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mos); }
.voet p { font-size: 16.5px; }
.voet a { text-underline-offset: 3px; text-decoration-color: rgba(38, 40, 36, .35); }
.voet-tel { font: 600 24px/1.2 var(--kop); color: var(--veen); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.voet .voet-onder p { font-size: 14px; color: var(--grijs); }
@media (max-width: 959px) { .voet-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 559px) { .voet-in { grid-template-columns: minmax(0, 1fr); } }

/* ----- Printen: alleen de vastgelegde wensen ----- */
@media print {
  body.print-wensen > *:not(main), body.print-wensen main > *:not(#wensen), body.print-wensen #wensen .wensen-kop, body.print-wensen .wensen-form { display: none !important; }
  body.print-wensen #wensen { padding: 0; }
  body.print-wensen .wensen-in { display: block; }
  body.print-wensen .samenvatting { position: static; background: none; border: 0; padding: 0; }
  body.print-wensen .samenvatting .knop { display: none; }
  body.print-wensen .samenvatting::after { content: "Uitvaartzorg Oantinken · Lindeleane 4, Dronrijp · dag en nacht 0517 093 140"; display: block; margin-top: 24px; font-size: 12px; }
}