/* Raamdecoland - handleidingen (meten en monteren): opmaak van de pagina, klasse .rdl-hd. Alleen het schermdeel van
   handleidingen/v3b/stijl.css (de PDF-opmaak blijft daar); wijzig dat bestand en draai handleidingen/v3b/live.mjs.
   Kleuren en maten volgen assets/css/tokens.css; de terugvalwaarden zijn gelijk aan die tokens.

   Kleurlogica: ink = anker (nummers, hoofdknoppen, hulpband), lime alleen als rand/vinkje, magenta-ink (#C4006A)
   voor links en maatlabels, lime-tint voor FAQ en hover/gekozen kaart, secties wit en tint om en om.
   Eén radius (12px), geen schaduwen. */

/* ======================================================================== scherm */
.rdl-hd {
  --hd-ink: var(--rdl-ink, #16201a);
  --hd-soft: var(--rdl-ink-soft, #3b4436);
  --hd-muted: var(--rdl-ink-muted, #5d6656);
  --hd-lime: var(--rdl-lime, #7bce0e);
  --hd-lime-tint: var(--rdl-lime-tint, #eef7e0);
  --hd-tint: var(--rdl-tint, #f3f5ef);
  --hd-rand: var(--rdl-border, #e3e6dd);
  --hd-rand-c: var(--rdl-border-control, #8a9283);
  --hd-link: var(--rdl-magenta-ink, #C4006A);
  --hd-magenta: var(--rdl-magenta, #FE008C);
  --hd-muur: #efe7dc;
  --hd-radius: 12px;
  --hd-kop: Sora, system-ui, sans-serif;
  --hd-tekst: Figtree, system-ui, sans-serif;
  --hd-marge: 16px;
  --hd-sectie: 40px;
  font-family: var(--hd-tekst);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hd-ink);
  overflow-wrap: break-word;
}
.rdl-hd *, .rdl-hd *::before, .rdl-hd *::after { box-sizing: border-box; }
.rdl-hd h1, .rdl-hd h2, .rdl-hd h3, .rdl-hd h4 { font-family: var(--hd-kop); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.rdl-hd h1 { font-size: 30px; line-height: 1.15; }
.rdl-hd h2 { font-size: 22px; }
.rdl-hd h3 { font-size: 18px; }
.rdl-hd p { margin: 0; }
.rdl-hd ul, .rdl-hd ol { margin: 0; padding: 0; list-style: none; }
.rdl-hd a { color: var(--hd-link); }
.rdl-hd a:hover { color: var(--hd-ink); }
.rdl-hd a:focus-visible, .rdl-hd summary:focus-visible, .rdl-hd button:focus-visible { outline: 2px solid var(--hd-ink); outline-offset: 2px; border-radius: 4px; }
.rdl-hd svg { display: block; max-width: 100%; height: auto; }
.rdl-hd-beeld svg, .rdl-hd-beeld img { width: 100%; height: auto; }
/* detailbeeld: omgekleurde render met de overlay (pijlen, loepring, vinkje) als eigen SVG-laag erover */
.rdl-hd-render { position: relative; display: block; }
.rdl-hd-render img { display: block; width: 100%; height: auto; }
.rdl-hd .rdl-hd-render__laag { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* secties: wit en tint om en om, van rand tot rand; inhoud in één wrap */
.rdl-hd-sectie { padding: calc(var(--hd-sectie) / 2) var(--hd-marge); }
.rdl-hd-sectie--tint { background: var(--hd-tint); padding-block: var(--hd-sectie); }
.rdl-hd-sectie--donker { background: var(--hd-ink); color: #fff; border-top: 3px solid var(--hd-lime); padding-block: var(--hd-sectie); }
.rdl-hd-wrap { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.rdl-hd-sectiekop { display: flex; align-items: center; gap: 12px; }
.rdl-hd-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--hd-ink); color: #fff; font-family: var(--hd-kop); font-weight: 700; font-size: 15px; }

/* kop */
.rdl-hd-kop .rdl-hd-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.rdl-hd-kop__tekst { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rdl-hd-terug { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; align-self: flex-start; }
.rdl-hd-terug svg { width: 16px; height: 16px; }
.rdl-hd-kicker { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hd-link); }
.rdl-hd-intro { font-size: 17px; color: var(--hd-soft); }
.rdl-hd-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.rdl-hd-pillen--paneel { margin: 0 0 16px; }
.rdl-hd-pil { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hd-rand); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.rdl-hd-pil svg { width: 16px; height: 16px; flex: none; }
.rdl-hd-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.rdl-hd-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--hd-radius); border: 2px solid var(--hd-ink); background: var(--hd-ink); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1.2; }
.rdl-hd-knop svg { width: 18px; height: 18px; flex: none; }
.rdl-hd-knop:hover { background: #2c3a30; border-color: #2c3a30; }
.rdl-hd-knop--omlijnd { background: #fff; color: var(--hd-ink) !important; }
.rdl-hd-knop--omlijnd:hover { background: var(--hd-lime-tint); border-color: var(--hd-ink); }
.rdl-hd-knop--licht { background: #fff; border-color: #fff; color: var(--hd-ink) !important; }
.rdl-hd-knop--licht:hover { background: var(--hd-lime-tint); border-color: var(--hd-lime-tint); }
.rdl-hd-knop--wit-rand { background: transparent; border-color: #fff; color: #fff !important; }
.rdl-hd-knop--wit-rand:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.rdl-hd-sectie--donker a:focus-visible, .rdl-hd-afsluiting__review a:focus-visible { outline-color: #fff; }
.rdl-hd-kop__beeld { border-radius: var(--hd-radius); overflow: hidden; }

/* je hebt nodig / in het pakket */
.rdl-hd-spullen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hd-spullen__blok { border-radius: var(--hd-radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rdl-hd-spullen__blok--pakket { background: var(--hd-tint); }
.rdl-hd-spullen__blok--nodig { border: 1px solid var(--hd-rand); }
.rdl-hd-spullen__blok h2 { font-size: 16px; }
.rdl-hd-spullen ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rdl-hd-spullen li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: var(--hd-radius); font-size: 13px; line-height: 1.3; text-align: center; }
.rdl-hd-spullen__blok--pakket li { background: #fff; }
.rdl-hd-spullen__blok--nodig li { background: var(--hd-tint); }
.rdl-hd-spullen li svg { width: 100%; max-width: 96px; }

/* obstakels */
.rdl-hd-obstakels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rdl-hd-obstakel { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--hd-rand); border-radius: var(--hd-radius); padding: 12px 16px; }
.rdl-hd-obstakel svg { flex: none; width: 64px; height: 64px; }
.rdl-hd-obstakel strong { display: block; }
.rdl-hd-obstakel span { font-size: 14px; color: var(--hd-muted); }

/* keuze: twee (of drie) kaarten met ankerlinks */
.rdl-hd-keuzes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hd-keuze { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--hd-rand-c); border-radius: var(--hd-radius); background: #fff; color: var(--hd-ink) !important; text-decoration: none; }
.rdl-hd-keuze:hover, .rdl-hd-keuze:focus-visible { background: var(--hd-lime-tint); border: 1px solid var(--hd-ink); box-shadow: inset 0 0 0 1px var(--hd-ink); }
.rdl-hd-keuze .rdl-hd-beeld { border-radius: var(--hd-radius); overflow: hidden; }
.rdl-hd-keuze strong { font-family: var(--hd-kop); font-size: 18px; display: flex; align-items: center; gap: 8px; }
.rdl-hd-keuze__tekst { color: var(--hd-soft); }
.rdl-hd-keuze__link { color: var(--hd-link); font-weight: 700; font-size: 14px; }
.rdl-hd-letter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--hd-ink); color: #fff; font-size: 14px; flex: none; }

/* meten: per plaatsing een kaart met twee tekeningen */
.rdl-hd-plaatsingen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hd-plaatsing { background: #fff; border: 1px solid var(--hd-rand); border-radius: var(--hd-radius); padding: 16px; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 80px; }
.rdl-hd-plaatsing:target { border: 2px solid var(--hd-ink); padding: 15px; }
.rdl-hd-maten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rdl-hd-maat { display: flex; flex-direction: column; gap: 6px; }
.rdl-hd-maat .rdl-hd-beeld { border-radius: var(--hd-radius); overflow: hidden; }
.rdl-hd-maat span { font-size: 14px; color: var(--hd-soft); line-height: 1.45; }
.rdl-hd-regel { border: 2px solid var(--hd-ink); border-radius: var(--hd-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.rdl-hd-label { align-self: flex-start; background: var(--hd-ink); color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 2px 10px; }

/* rekenvoorbeeld en stoftabel */
.rdl-hd-reken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hd-reken__groep { border: 1px solid var(--hd-rand); border-radius: var(--hd-radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rdl-hd-reken__groep h3 { font-size: 16px; }
.rdl-hd-reken__groep dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rdl-hd-reken__groep dt { font-size: 13px; font-weight: 700; color: var(--hd-muted); text-transform: uppercase; letter-spacing: .05em; }
.rdl-hd-reken__groep dd { margin: 0; }
.rdl-hd-uitkomst { display: inline-block; background: var(--hd-lime-tint); border: 2px solid var(--hd-ink); border-radius: 999px; padding: 0 10px; font-weight: 700; white-space: nowrap; }
.rdl-hd-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.rdl-hd-tabel th, .rdl-hd-tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hd-rand); vertical-align: top; }
.rdl-hd-tabel th { font-size: 13px; color: var(--hd-muted); font-weight: 700; }
.rdl-hd-tabel td:last-child { font-weight: 700; white-space: nowrap; }
.rdl-hd-stof { border: 1px solid var(--hd-rand); border-radius: var(--hd-radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }

/* tabbladen (gedrag.js maakt van de keuzekaarten knoppen; zonder script blijven het ankerkaarten) */
.rdl-hd-vinkbol { display: none; }
.rdl-hd-tabs.is-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rdl-hd-tab { position: relative; font: inherit; text-align: left; cursor: pointer; width: 100%; padding: 12px; border: 1px solid var(--hd-rand-c); }
.rdl-hd-tab strong { font-size: 16px; line-height: 1.25; padding-right: 28px; }
.rdl-hd-tab[aria-selected="true"], .rdl-hd-tab[aria-selected="true"]:hover { background: var(--hd-lime-tint); border: 2px solid var(--hd-ink); padding: 11px; box-shadow: none; }
.rdl-hd-tab[aria-selected="false"]:hover { background: #fff; border-color: var(--hd-ink); box-shadow: inset 0 0 0 1px var(--hd-ink); }
.rdl-hd-tab[aria-selected="true"] .rdl-hd-vinkbol { display: inline-flex; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; background: var(--hd-lime); border: 2px solid var(--hd-ink); color: var(--hd-ink); align-items: center; justify-content: center; }
.rdl-hd-tab[aria-selected="true"] .rdl-hd-vinkbol svg { width: 16px; height: 16px; stroke-width: 3; }
.rdl-hd-tab .rdl-hd-keuze__tekst { display: none; }
/* smal scherm (< 400px): tabbladen onder elkaar, klein beeld links, zodat lange namen (Schroefmontage) passen */
@media (max-width: 399px) {
  .rdl-hd-tabs.is-tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rdl-hd-tab { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .rdl-hd-tab .rdl-hd-beeld { grid-row: 1 / span 2; }
}
.rdl-hd-paneel { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 80px; }
.rdl-hd-paneel[hidden] { display: none; }
.rdl-hd-paneel:focus { outline: none; }
.rdl-hd-tabs:not(.is-tabs) ~ .rdl-hd-paneel + .rdl-hd-paneel { border-top: 1px solid var(--hd-rand); padding-top: 24px; }
.rdl-hd-paneel__pdf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: flex-start; font-weight: 700; font-size: 15px; }
.rdl-hd-paneel__pdf svg { width: 18px; height: 18px; }
.rdl-hd-knop__erbij { font-weight: 600; }

/* plekken (duo): drie kleine kaarten */
.rdl-hd-plekken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rdl-hd-plek { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; color: var(--hd-soft); }
.rdl-hd-plek strong { color: var(--hd-ink); font-size: 15px; }
.rdl-hd-plek .rdl-hd-beeld { border-radius: var(--hd-radius); overflow: hidden; }

/* let op */
.rdl-hd-letop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; border: 2px solid var(--hd-ink); border-radius: var(--hd-radius); padding: 16px; background: #fff; align-items: center; }
.rdl-hd-letop .rdl-hd-beeld { border-radius: var(--hd-radius); overflow: hidden; }
.rdl-hd-letop__tekst { display: flex; flex-direction: column; gap: 8px; }

/* stappen: kaarten met beeld boven tekst */
.rdl-hd-groepintro { color: var(--hd-soft); max-width: 68ch; }
.rdl-hd-stappen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hd-stap { background: #fff; border: 1px solid var(--hd-rand); border-radius: var(--hd-radius); overflow: hidden; display: flex; flex-direction: column; }
.rdl-hd-stap .rdl-hd-beeld { background: var(--hd-muur); position: relative; }
.rdl-hd-stap__tekst { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rdl-hd-stap__kop { display: flex; align-items: center; gap: 12px; }
.rdl-hd-stap__kop .rdl-hd-nr { width: auto; min-width: 32px; padding: 0 8px; }
.rdl-hd-stap__zinnen { display: flex; flex-direction: column; gap: 4px; color: var(--hd-soft); }
.rdl-hd-stap--zonder-beeld .rdl-hd-stap__tekst { padding: 20px; }
.rdl-hd-loep { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--hd-ink); border-radius: 999px; padding: 1px 8px 1px 6px; font-size: 12px; font-weight: 700; }
.rdl-hd-loep svg { width: 14px; height: 14px; }
.rdl-hd-stap .rdl-hd-tabel { font-size: 14px; }
.rdl-hd-stap h4 { font-size: 14px; margin-top: 8px; }
.rdl-hd-stap--kind { border: 2px solid var(--hd-ink); }

/* FAQ (gelijk aan rdl_faq_html van het thema) */
.rdl-hd .rdl-faq { padding: 20px var(--hd-marge); border-radius: var(--hd-radius); background: var(--hd-lime-tint); }
.rdl-hd .rdl-faq__kop { margin: 0 0 8px; font-size: 22px; }
.rdl-hd .rdl-faq__vraag { border-top: 1px solid #c9dcae; }
.rdl-hd .rdl-faq__vraag summary { position: relative; display: block; min-height: 44px; padding: 12px 40px 12px 0; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.rdl-hd .rdl-faq__vraag summary::-webkit-details-marker { display: none; }
.rdl-hd .rdl-faq__vraag summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; line-height: 1; }
.rdl-hd .rdl-faq__vraag[open] summary::after { content: "\2212"; }
.rdl-hd .rdl-faq__antwoord { max-width: 68ch; padding: 0 0 14px; color: var(--hd-soft); }
.rdl-hd .rdl-faq__antwoord p { margin: 0; }

/* hulpband (donker) */
.rdl-hd-hulpband .rdl-hd-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rdl-hd-hulpband__tekst { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.rdl-hd-hulpband__tekst span { color: var(--hd-lime-tint); }
.rdl-hd-hulpband .rdl-hd-knoppen { margin: 0; }

/* afsluiting (montage): review + hulp */
.rdl-hd-afsluiting { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hd-afsluiting > div { border-radius: var(--hd-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.rdl-hd-afsluiting__review { background: var(--hd-ink); color: #fff; border-top: 3px solid var(--hd-lime); }
.rdl-hd-afsluiting__review p { color: var(--hd-lime-tint); }
.rdl-hd-afsluiting__review strong { color: #fff; }
.rdl-hd-afsluiting__hulp { border: 1px solid var(--hd-rand); }
.rdl-hd-afsluiting__hulp p { color: var(--hd-soft); }
.rdl-hd-afsluiting .rdl-hd-knoppen { margin-top: 8px; }

/* doorlinks */
.rdl-hd-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rdl-hd-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border: 1px solid var(--hd-rand); border-radius: var(--hd-radius); padding: 12px 16px; text-decoration: none; color: var(--hd-ink) !important; }
.rdl-hd-link:hover { border-color: var(--hd-ink); }
.rdl-hd-link small { display: block; font-size: 12px; color: var(--hd-muted); text-transform: uppercase; letter-spacing: .04em; }
.rdl-hd-link strong { display: block; }
.rdl-hd-link svg { width: 20px; height: 20px; color: var(--hd-link); flex: none; }

@media (min-width: 600px) {
  .rdl-hd-tab .rdl-hd-keuze__tekst { display: block; font-size: 14px; }
  .rdl-hd-obstakels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdl-hd-obstakel { flex-direction: column; align-items: flex-start; }
  .rdl-hd-keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hd-spullen ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rdl-hd-letop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .rdl-hd { --hd-marge: 24px; --hd-sectie: 64px; }
  .rdl-hd h1 { font-size: 40px; }
  .rdl-hd h2 { font-size: 24px; }
  .rdl-hd-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hd-stap__tekst { padding: 24px; }
  .rdl-hd-reken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hd-afsluiting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hd-afsluiting > div { padding: 24px; }
  .rdl-hd-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdl-hd-links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* kindveiligheid als losse laatste kaart: over de volle breedte, beeld naast de tekst */
  /* brede kaart (stap met tabel, of een kaart die anders alleen in de rij staat): beeld naast de tekst */
  .rdl-hd-stap--breed { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .rdl-hd-stap--breed .rdl-hd-beeld { flex: 0 0 50%; display: flex; align-items: center; }
  .rdl-hd-stap--breed .rdl-hd-stap__tekst { flex: 1 1 auto; justify-content: center; }
  .rdl-hd-tab { padding: 16px; flex-direction: row; align-items: center; gap: 16px; }
  .rdl-hd-tab .rdl-hd-beeld { flex: 0 0 42%; }
  .rdl-hd-tab > strong, .rdl-hd-tab > .rdl-hd-keuze__tekst { flex: 1 1 auto; }
  .rdl-hd-tab { display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-content: center; }
  .rdl-hd-tab .rdl-hd-beeld { grid-row: 1 / span 2; }
  .rdl-hd-tab > strong { align-self: end; }
  .rdl-hd-tab > .rdl-hd-keuze__tekst { align-self: start; }
  .rdl-hd-tab[aria-selected="true"], .rdl-hd-tab[aria-selected="true"]:hover { padding: 15px; }
  .rdl-hd .rdl-faq { padding: 24px 32px; }
  .rdl-hd-plaatsing, .rdl-hd-keuze { padding: 24px; }
  .rdl-hd-plaatsing:target { padding: 23px; }
  .rdl-hd-plekken { gap: 16px; }
}
@media (min-width: 1024px) {
  .rdl-hd-kop .rdl-hd-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .rdl-hd-kop--montage .rdl-hd-wrap { align-items: start; }
  .rdl-hd-plaatsingen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hd-spullen ul { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* meten met tabbladen (21 okt 2026): paneel per manier van ophangen, met rekenvoorbeeld en de link naar de montage */
.rdl-hd-paneel--meten { gap: 16px; }
.rdl-hd-plaatsing__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rdl-hd-pillen--paneel { margin: 0; }
.rdl-hd-reken__groep--paneel { background: #fff; }
.rdl-hd-reken__groep--paneel h4, .rdl-hd-ophangen h4 { margin: 0; font-family: var(--hd-kop); font-size: 16px; }
.rdl-hd-ophangen { display: flex; flex-direction: column; gap: 8px; }
.rdl-hd-links.rdl-hd-links--paneel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rdl-hd-links--paneel .rdl-hd-link { background: #fff; }
/* 3 of 5 tabbladen: de laatste kaart over de volle breedte zolang er 2 kolommen zijn (geen gat) */
@media (min-width: 400px) and (max-width: 1023px) {
  .rdl-hd-tabs.is-tabs[data-aantal="3"] > :last-child, .rdl-hd-tabs.is-tabs[data-aantal="5"] > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .rdl-hd-tabs.is-tabs[data-aantal="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdl-hd-tabs.is-tabs[data-aantal="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rdl-hd-tabs.is-tabs[data-aantal="5"] > :nth-child(-n+3) { grid-column: span 2; }
  .rdl-hd-tabs.is-tabs[data-aantal="5"] > :nth-child(n+4) { grid-column: span 3; }
  /* paneel: de meetkaart links, rekenvoorbeeld, ophangen en PDF rechts */
  .rdl-hd-paneel--meten:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 24px; row-gap: 16px; align-items: start; }
  .rdl-hd-paneel--meten > .rdl-hd-plaatsing { grid-column: 1; grid-row: 1 / span 4; }
  .rdl-hd-paneel--meten > :not(.rdl-hd-plaatsing) { grid-column: 2; }
}