/* Raamdecoland - hubpagina's /meethandleidingen/ en /montagehandleidingen/ (sjabloon handleidingen-hub.php).
   Ontwerp: Ontwerp/handleidingen.html. Alleen licht thema. Mobile-first; prefix rdl-hh.
   Kleuren: lime var(--rdl-lime) met donkere tekst, var(--rdl-magenta-ink) voor tekst en knoppen, var(--rdl-magenta) alleen randen. */
.rdl-hh {
  --hh-bg: #ffffff; --hh-soft: #f5f8f0; --hh-line: #e3e8dc; --hh-fg: #1d2318; --hh-muted: #566050;
  --hh-lime: var(--rdl-lime); --hh-on-lime: #18210d; --hh-mag: var(--rdl-magenta); --hh-mag-ink: var(--rdl-magenta-ink); --hh-mag-soft: #fff0f7;
  color-scheme: light; background: var(--hh-bg); color: var(--hh-fg);
  font-family: Figtree, system-ui, sans-serif; font-size: 16px; line-height: 1.6;
}
.rdl-hh *, .rdl-hh *::before, .rdl-hh *::after { box-sizing: border-box; }
.rdl-hh h1, .rdl-hh h2, .rdl-hh h3, .rdl-hh h4 { margin: 0; font-family: Sora, system-ui, sans-serif; line-height: 1.15; color: var(--hh-fg); text-wrap: balance; }
.rdl-hh p { margin: 0; }
.rdl-hh a { color: var(--hh-mag-ink); }
.rdl-hh a:focus-visible, .rdl-hh summary:focus-visible { outline: 3px solid var(--hh-lime); outline-offset: 2px; }
.rdl-hh ul, .rdl-hh ol { margin: 0; padding: 0; list-style: none; }

.rdl-hh__wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.rdl-hh__eyebrow { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-muted); }
.rdl-hh__sectie { padding-block: 28px; }
.rdl-hh__sectie--alt { background: var(--hh-soft); border-block: 1px solid var(--hh-line); }
.rdl-hh__kop { display: grid; gap: 8px; max-width: 65ch; margin-bottom: 20px; }
.rdl-hh__kop h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; }
.rdl-hh__kop p { color: var(--hh-muted); }

/* Knoppen */
.rdl-hh__knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border: 2px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; }
/* Bellen = hoofdknop die niet kopen is: ink (klassenaam blijft) */
.rdl-hh a.rdl-hh__knop--mag { background: var(--rdl-ink); color: #fff; }
.rdl-hh a.rdl-hh__knop--mag:hover { background: #2c3a30; }
.rdl-hh a.rdl-hh__knop--lijn { border-color: var(--hh-fg); color: var(--hh-fg); background: transparent; }
.rdl-hh a.rdl-hh__knop--lijn:hover { background: #fff; }
.rdl-hh a.rdl-hh__knop--donker { background: var(--hh-on-lime); color: #fff; }

/* Hero */
.rdl-hh__hero { background: var(--hh-soft); border-bottom: 1px solid var(--hh-line); }
.rdl-hh__hero > .rdl-hh__wrap { padding-block: 12px 28px; display: grid; gap: 0; }
.rdl-hh__kruimels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--hh-muted); }
.rdl-hh__kruimels a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hh-muted); text-decoration: none; }
.rdl-hh__kruimels a:hover { text-decoration: underline; }
.rdl-hh__schakelaar { margin-top: 12px; display: flex; width: max-content; max-width: 100%; padding: 4px; gap: 4px; background: #fff; border: 1px solid var(--hh-line); border-radius: 999px; }
.rdl-hh__schakelaar a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; color: var(--hh-fg); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.rdl-hh__schakelaar a[aria-current="page"] { background: var(--hh-lime); color: var(--hh-on-lime); }
.rdl-hh__hero-grid { margin-top: 20px; align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.rdl-hh__hero-tekst { display: grid; gap: 12px; max-width: 62ch; align-content: start; }
.rdl-hh__hero-tekst h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; overflow-wrap: break-word; }
.rdl-hh__hero-tekst p { color: var(--hh-muted); font-size: 17px; }
.rdl-hh__beloftes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rdl-hh__beloftes li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--hh-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.rdl-hh__beloftes li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hh-lime); }
.rdl-hh__hulp { display: grid; gap: 10px; align-content: start; padding: 20px; border: 2px solid var(--hh-mag); border-radius: 16px; background: #fff; }
.rdl-hh__hulp h2 { font-size: 1.1rem; font-weight: 700; }
.rdl-hh__hulp p { color: var(--hh-muted); font-size: 15px; }
.rdl-hh__hulp-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rdl-hh__hulp-acties .rdl-hh__knop { flex: 1 1 140px; }
.rdl-hh__hulp .rdl-hh__hulp-klein { font-size: 14px; }
.rdl-hh__hulp-klein a { display: inline-flex; align-items: center; min-height: 44px; }

/* Productkiezer */
.rdl-hh .rdl-hh__stap { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.2; }
.rdl-hh .rdl-hh__stap b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hh-lime); color: var(--hh-on-lime); font-size: 14px; line-height: 1; text-align: center; }
.rdl-hh .rdl-hh__stap--klein { margin-bottom: 12px; font-family: Sora, system-ui, sans-serif; }
.rdl-hh__tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rdl-hh__tegels > li { display: flex; min-width: 0; }
.rdl-hh a.rdl-hh__tegel { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--hh-line); border-radius: 12px; background: #fff; color: var(--hh-fg); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; overflow: hidden; }
.rdl-hh__tegel-beeld { position: relative; display: block; aspect-ratio: 4 / 3; max-height: 90px; background: var(--hh-soft); }
.rdl-hh__tegel-beeld img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rdl-hh__tegel-naam { display: block; padding: 10px 12px; color: var(--hh-fg); overflow-wrap: anywhere; }
@media (hover: hover) {
  .rdl-hh a.rdl-hh__tegel[aria-pressed="false"]:hover { border-color: #b4bea8; }
}
.rdl-hh a.rdl-hh__tegel:focus { outline: none; }
.rdl-hh a.rdl-hh__tegel:focus-visible { outline: 3px solid var(--hh-lime); outline-offset: 2px; }
.rdl-hh a.rdl-hh__tegel[aria-pressed="true"] { border-color: var(--hh-lime); box-shadow: 0 0 0 2px var(--hh-lime) inset; background: var(--hh-soft); }

.rdl-hh__panelen { margin-top: 20px; display: grid; gap: 16px; }
.rdl-hh__paneel { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--hh-line); border-radius: 16px; background: #fff; scroll-margin-top: 16px; }
.rdl-hh__paneel[hidden] { display: none; }
.rdl-hh__paneel h3 { font-size: 1.25rem; font-weight: 700; }
.rdl-hh__paneel h4 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hh-muted); }
.rdl-hh__sub { margin-top: 4px; color: var(--hh-muted); font-size: 15px; }
.rdl-hh__paneel-hoofd .rdl-hh__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 16px; font-size: 14px; }
.rdl-hh__sub a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.rdl-hh__paneel-hoofd .rdl-hh__sub a { margin-block: -13px; }
.rdl-hh__paneel-kolommen { display: grid; gap: 24px; }
.rdl-hh__lijst { display: grid; gap: 8px; margin-top: 12px; }
.rdl-hh__lijst a { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.rdl-hh__lijst--web a { border: 1.5px solid var(--hh-fg); color: var(--hh-fg); }
.rdl-hh__lijst--web a::after { content: "→"; flex: none; }
.rdl-hh__lijst--web a:hover { background: var(--hh-soft); }
.rdl-hh__lijst--pdf a { border: 1.5px solid var(--hh-mag); background: var(--hh-mag-soft); color: var(--hh-mag-ink); }
.rdl-hh__lijst--pdf a::after { content: "PDF"; flex: none; padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; letter-spacing: .06em; }
.rdl-hh__lijst--pdf a:hover { background: #ffe0ef; }
.rdl-hh__lijst-tekst { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; }
.rdl-hh__tag { display: inline-block; flex: none; margin-left: 4px; padding: 2px 6px; border-radius: 4px; background: var(--hh-lime); color: var(--hh-on-lime); font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.rdl-hh__paneel-geen { display: grid; gap: 12px; }
.rdl-hh__paneel-geen > p:first-child { font-size: 17px; font-weight: 600; }
.rdl-hh__noot { padding: 14px; border-radius: 10px; background: var(--hh-soft); color: var(--hh-muted); font-size: 15px; }
p.rdl-hh__noot { margin-top: 12px; }
.rdl-hh__paneel-geen .rdl-hh__noot { margin-top: 0; }

/* Algemene blokken */
.rdl-hh__kolommen { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.rdl-hh__doos { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 20px; border: 1px solid var(--hh-line); border-radius: 14px; background: #fff; }
.rdl-hh__doos h3 { font-size: 1.05rem; font-weight: 700; }
.rdl-hh__doos p { color: var(--hh-muted); font-size: 15px; }
.rdl-hh__doos svg { width: 100%; height: auto; max-width: 260px; border-radius: 8px; background: var(--hh-soft); color: var(--hh-fg); }
.rdl-hh__doos-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.rdl-hh__kit { display: flex; flex-wrap: wrap; gap: 8px; }
.rdl-hh__kit li { padding: 8px 12px; border: 1px solid var(--hh-line); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.rdl-hh__tips { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); counter-reset: tip; }
.rdl-hh__tips li { counter-increment: tip; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--hh-line); border-radius: 12px; background: #fff; }
.rdl-hh__tips li::before { content: counter(tip); display: grid; place-items: center; height: 36px; border-radius: 8px; background: var(--hh-lime); color: var(--hh-on-lime); font: 800 17px Sora, system-ui, sans-serif; }
.rdl-hh__tips b { display: block; margin-bottom: 2px; }
.rdl-hh__tips span { color: var(--hh-muted); font-size: 15px; }

/* FAQ */
.rdl-hh__faq details { padding-block: 4px; border-bottom: 1px solid var(--hh-line); }
.rdl-hh__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 8px; cursor: pointer; list-style: none; font: 600 16px/1.3 Sora, system-ui, sans-serif; }
.rdl-hh__faq summary::-webkit-details-marker { display: none; }
.rdl-hh__faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--hh-mag-ink); }
.rdl-hh__faq details[open] summary::after { content: "–"; }
.rdl-hh__faq details p { max-width: 70ch; padding-bottom: 12px; color: var(--hh-muted); }

/* Doorverwijzing en disclaimer */
.rdl-hh__volgende { border-top: 3px solid var(--rdl-lime); background: var(--rdl-ink); color: #fff; }
.rdl-hh__volgende a.rdl-hh__knop--donker { background: #fff; color: var(--rdl-ink); }
.rdl-hh__volgende a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rdl-hh__volgende > .rdl-hh__wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; }
.rdl-hh__volgende h2 { color: #fff; font-size: 1.3rem; font-weight: 700; }
.rdl-hh__disclaimer { padding-block: 20px 40px; color: var(--hh-muted); font-size: 14px; }
.rdl-hh__disclaimer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 640px) {
  .rdl-hh__tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rdl-hh__tegel-beeld { max-height: 140px; }
  .rdl-hh__wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 760px) {
  .rdl-hh__kolommen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdl-hh__kolommen--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hh__tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-hh__sectie { padding-block: 40px; }
}
@media (min-width: 880px) {
  .rdl-hh__hero-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .rdl-hh__paneel { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .rdl-hh__paneel-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .rdl-hh__paneel-kolommen--een { grid-template-columns: minmax(0, 1fr); }
  .rdl-hh__paneel-kolommen--een .rdl-hh__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tikvlak links in llopende tekst (veelgestelde vragen) */
.rdl-hh__faq details p a { display: inline-flex; align-items: center; min-height: 44px; }

/* Hulpkaart: in de hero vanaf 768 px, mobiel onder de productkiezer */
.rdl-hh__hulp--onder { margin-top: 24px; }
.rdl-hh__hulp-acties .rdl-hh__knop { white-space: nowrap; }

/* Mobiel compacter (tot 768 px): productkiezer binnen het eerste scherm */
@media (max-width: 767px) {
  .rdl-hh__hero > .rdl-hh__wrap { padding-block: 4px 16px; }
  .rdl-hh__hero-grid { margin-top: 12px; gap: 0; }
  .rdl-hh__hero-tekst { gap: 8px; }
  .rdl-hh__hero-tekst h1 { font-size: clamp(1.6rem, 7vw, 1.9rem); }
  .rdl-hh__hero-tekst p { font-size: 16px; }
  .rdl-hh__intro-rest { display: none; }
  .rdl-hh__hulp--hero { display: none; }
  .rdl-hh__beloftes { flex-wrap: nowrap; overflow-x: auto; margin-top: 0; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; }
  .rdl-hh__beloftes::-webkit-scrollbar { display: none; }
  .rdl-hh__beloftes li { flex: none; white-space: nowrap; }
  .rdl-hh__sectie { padding-block: 20px; }
  .rdl-hh__hulp-acties { flex-direction: column; }
  .rdl-hh__hulp-acties .rdl-hh__knop { flex: none; width: 100%; }
}
@media (min-width: 768px) {
  .rdl-hh__hulp--onder { display: none; }
}

/* Tegels even hoog: naam altijd ruimte voor twee regels */
.rdl-hh__tegel-naam { min-height: calc(2 * 1.25em + 20px); }

@media (prefers-reduced-motion: no-preference) {
  .rdl-hh a.rdl-hh__tegel, .rdl-hh__lijst a, .rdl-hh__knop { transition: transform .15s, box-shadow .15s, background-color .15s; }
  .rdl-hh__lijst a:hover, .rdl-hh__knop:hover { transform: translateY(-1px); }
}