/* Bouwcentrale Holland: huisstijl over de configurator-engine.
   De engine (core.css) is donker met een goudaccent; hier worden de
   kleurvariabelen vervangen door het nachtblauw en oranje van de site en het
   lettertype door Yantramanav, zoals op de rest van bouwcentrale. Daarnaast
   staan hier de sitekop, de voet en de lichte inhoudsblokken onder de
   configurator, zodat deze statische pagina één geheel vormt met de Next-site.
   De engine zelf blijft onaangeraakt. */

@font-face { font-family: "Yantramanav"; font-weight: 400; font-display: swap; src: url("/fonts/yantramanav-400.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-weight: 500; font-display: swap; src: url("/fonts/yantramanav-500.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-weight: 700; font-display: swap; src: url("/fonts/yantramanav-700.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-weight: 900; font-display: swap; src: url("/fonts/yantramanav-900.woff2") format("woff2"); }

:root {
  /* Licht palet: de configurator staat op wit, zoals de rest van de site. */
  --ink-900: #f3f3f5;
  --ink-800: #ffffff;
  --ink-700: #fafafa;
  --tint: #fafafa;
  --ink-600: #ffffff;
  --ink-500: #f6f6f8;
  --ink-400: #e6e6ea;
  --bg: #ffffff;
  --bg-raise: #ffffff;
  --bg-raise-2: #f7f7f9;
  --line: #ececec;
  --line-strong: #d8d8de;
  --text: #1e1e2a;
  --text-1: #1e1e2a;
  --text-2: #55555f;
  --text-3: #767682;

  /* accent: oranje; de donkere tint voor kleine tekst op wit (AA) */
  --accent: #e04522;
  --accent-strong: #c23a1b;
  --accent-light: #f2714f;
  --accent-deep: #9c2e14;
  --accent-dim: rgba(224, 69, 34, .12);
  --acc: #c23a1b;
  --acc-soft: rgba(224, 69, 34, .1);
  --acc-diep: #c23a1b;
  --goud-metaal: linear-gradient(150deg, #f2714f 0%, #e04522 45%, #c23a1b 100%);
  --goud-lijn: linear-gradient(90deg, transparent, #e04522, transparent);
  --glow: rgba(224, 69, 34, .25);
  --schaduw-goud: 0 8px 28px -10px var(--glow);
  --schaduw-1: 0 1px 2px rgba(30, 30, 42, .06);
  --schaduw-2: 0 2px 4px rgba(30, 30, 42, .05), 0 8px 16px -6px rgba(30, 30, 42, .12);
  --schaduw-3: 0 4px 8px rgba(30, 30, 42, .05), 0 16px 32px -10px rgba(30, 30, 42, .14);
  --warn: #b45309;
  --danger: #dc2626;

  --font: "Yantramanav", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Yantramanav", ui-sans-serif, system-ui, sans-serif;

  /* sitekleuren (globals.css van de Next-site) */
  --bch-oranje: #e04522;
  --bch-oranje-donker: #c23a1b;
  --bch-oranje-helder: #f2714f;
  --bch-inkt: #1e1e2a;
  --bch-nacht: #0e1a2b;
  --bch-tekst: #55555f;
  --bch-zacht: #fef8f6;
  --bch-lijn: #ececec;
  --bch-wit: #ffffff;
  --bch-radius: 1.25rem;
  --bch-kop: 76px;
}
@media (min-width: 640px) { :root { --bch-kop: 88px; } }

/* Yantramanav is smaller than Inter at the same size; one step up keeps the
   engine's text readable. */
html { font-size: 106%; scroll-padding-top: calc(var(--bch-kop) + 1rem); }
/* Doelen van scrollIntoView blijven onder de vaste sitekop vandaan via de
   scroll-padding op html; de scroll-marges van de engine zouden daar bovenop
   komen en staan daarom op nul. */
.ng-guided .conf, .ng-guided .ng-steps, .ng-guided #ngSteps, .ng-guided #offerte, #aifoto { scroll-margin-top: 0; }
body { font-family: var(--font); }
.h1, .h2, h1, h2, h3 { font-family: var(--font); font-weight: 900; letter-spacing: -0.02em; }
.grad-text { background: var(--goud-metaal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Geen korrelachtergrond en geen sectielijnen: de site is strak. */
body::before { display: none; }
.sectie::before { display: none; }

/* De tekst van de pagina mag gewoon geselecteerd worden; alleen de beelden
   zijn beschermd (zie ng-protect-css, dat de body op user-select:none zet). */
.bch-kop-wrap, .bch-hero, .bch-licht, .bch-voet, .cfg__panel, .ng-image-note { -webkit-user-select: text; user-select: text; }

/* knoppen: ronder, zoals de site */
.btn { border-radius: 1rem; font-weight: 700; }
.btn--acc { background: var(--accent); color: #fff; }
.btn--ghost { background: #fff; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--bg-raise-2); border-color: var(--text-3); box-shadow: none; }
.matswitch { background: var(--bg-raise-2); }
.matswitch button.is-on, .matswitch a.is-on { background: var(--accent); color: #fff; }
.conf__hero .live, .conf__hero .dim { background: rgba(14, 26, 43, .7); }
.card { background: #fff; border: 1px solid var(--line); }
#ngReview { border: 1px solid var(--line); }
.ng-notice { background: #fff8f6; }
.ng-fit-note { background: #fff8f6; }
.btn--acc:hover { background: var(--accent-strong); filter: none; }

/* formulier */
.lead__akkoord { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--text-2); margin-top: .2rem; }
.lead__akkoord input { margin-top: .25rem; accent-color: var(--accent); }
.lead__akkoord a { color: var(--acc); }
.fld__fout { margin: .3rem 0 0; font-size: .78rem; color: #b91c1c; }
.lead input.is-fout, .lead input[aria-invalid="true"] { border-color: #f87171; }
.lead__msg.ok { color: #15803d; }

/* herstelmelding van configuratie-bewaren.js in de huisstijl */
#ngBewaardMelding { background: #fff !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; box-shadow: var(--schaduw-3) !important; }
#ngBewaardMelding button[data-ngbm="opnieuw"] { background: #e04522 !important; color: #fff !important; }

/* Gedeelde maat van de sitekop en -voet (container-site van de Next-site). */
.bch-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .bch-container { padding-inline: 2rem; } }
.bch-btn { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .625rem; border-radius: 1rem; padding: .75rem 1.5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform .2s, background-color .2s, color .2s; cursor: pointer; border: 0; font-family: inherit; }
.bch-btn--oranje { background: var(--bch-oranje); color: #fff; box-shadow: 0 10px 24px -10px rgba(224, 69, 34, .7); }
.bch-btn--oranje:hover { background: var(--bch-oranje-donker); transform: translateY(-2px); }
.bch-btn--donker { background: var(--bch-inkt); color: #fff; }
.bch-btn--donker:hover { background: #000; transform: translateY(-2px); }
.bch-btn--rand-licht { border: 2px solid rgba(255,255,255,.7); color: #fff; }
.bch-btn--rand-licht:hover { background: #fff; color: var(--bch-inkt); }
.bch-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ------------------------------------------------------------------ */
/* Conceptbalk                                                         */
.bch-concept { background: var(--bch-inkt); color: rgba(255,255,255,.85); text-align: center; font-size: .85rem; padding: .5rem 1rem; }
.bch-concept strong { color: var(--bch-oranje); }
.bch-skip { position: absolute; left: -999px; top: .75rem; z-index: 400; background: var(--bch-oranje); color: #fff; padding: .6rem 1rem; border-radius: .75rem; font-weight: 700; }
.bch-skip:focus { left: .75rem; }

/* ------------------------------------------------------------------ */
/* Sitekop: zwevende witte balk, zoals Header.tsx                      */
.bch-kop { position: sticky; top: 0; z-index: 300; }
.bch-kop-wrap { margin-inline: auto; width: 100%; max-width: 1296px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 50px -24px rgba(14,26,43,.5); transition: max-width .3s, border-radius .3s, box-shadow .3s, transform .3s; }
@media (min-width: 640px) { .bch-kop-wrap { transform: translateY(12px); border-radius: 1.75rem; } }
.bch-kop.is-gescrold .bch-kop-wrap { max-width: 1320px; box-shadow: 0 10px 40px -18px rgba(14,26,43,.45); }
@media (min-width: 640px) { .bch-kop.is-gescrold .bch-kop-wrap { transform: none; border-radius: 0 0 1.75rem 1.75rem; } }
.bch-kop-rij { display: flex; height: 76px; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1.25rem; }
@media (min-width: 640px) { .bch-kop-rij { height: 88px; padding-inline: 2rem; } }
.bch-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; flex: none; }
.bch-logo svg { height: 2.25rem; width: auto; }
@media (min-width: 640px) { .bch-logo svg { height: 2.5rem; } }
.bch-logo span { margin-top: .375rem; font-size: .72rem; font-weight: 900; letter-spacing: .06em; color: var(--bch-oranje); }
@media (min-width: 640px) { .bch-logo span { font-size: .8rem; } }
.bch-nav { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .bch-nav { display: flex; } }
.bch-nav a { border-radius: .75rem; padding: .625rem .875rem; font-size: 1.02rem; font-weight: 700; color: var(--bch-inkt); text-decoration: none; transition: color .2s; }
.bch-nav a:hover, .bch-nav a[aria-current="page"] { color: var(--bch-oranje); }
.bch-kop-acties { display: flex; align-items: center; gap: .625rem; }
.bch-kop-acties .bch-btn--oranje { display: none; min-height: 52px; padding-inline: 1.5rem; }
@media (min-width: 640px) { .bch-kop-acties .bch-btn--oranje { display: inline-flex; } }
.bch-menu-knop { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; background: #f1f1f1; color: var(--bch-inkt); border: 0; cursor: pointer; }
.bch-menu-knop svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) { .bch-menu-knop { display: none; } }

/* mobiel menu */
.bch-menu { position: fixed; inset: 0; z-index: 320; display: flex; flex-direction: column; background: var(--bch-nacht); color: #fff; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.bch-menu.is-open { visibility: visible; opacity: 1; }
@media (min-width: 1024px) { .bch-menu { display: none; } }
.bch-menu-kop { display: flex; height: 76px; align-items: center; justify-content: space-between; padding-inline: 1.25rem; }
.bch-menu-kop .bch-logo span { color: var(--bch-oranje); }
.bch-menu-sluit { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; }
.bch-menu-sluit svg { width: 1.5rem; height: 1.5rem; }
.bch-menu-body { flex: 1; overflow-y: auto; padding: 0 1.25rem 2.5rem; }
.bch-menu-lbl { margin: 1rem 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bch-oranje); }
.bch-menu-diensten { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bch-menu-diensten a { display: flex; height: 100%; align-items: center; border-radius: 1rem; background: rgba(255,255,255,.06); padding: .75rem; font-weight: 700; line-height: 1.2; color: #fff; text-decoration: none; }
.bch-menu-links { margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.bch-menu-links a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1.25rem; font-weight: 700; color: #fff; text-decoration: none; }
.bch-menu-links svg { width: 1.25rem; height: 1.25rem; color: var(--bch-oranje); }
.bch-menu-acties { display: grid; gap: .75rem; margin-top: 2rem; }
body.bch-menu-open { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Hero van de configurator, in de maat van PaginaKop                  */
.cfg-hero { position: relative; overflow: hidden; background: var(--bch-nacht); color: #fff; padding: clamp(1.4rem, 4vh, 2.6rem) 0 0; text-align: left; }
.cfg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 85% 10%, rgba(224, 69, 34, .18), transparent); }
.cfg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3.5vw; background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.cfg-hero .wrap { position: relative; }
.cfg-hero .pill { margin-bottom: 1rem; }
.cfg-hero .h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; color: #fff; max-width: 18ch; margin-inline: 0; }
.cfg-hero .lede { margin-inline: 0; max-width: 60ch; color: rgba(255,255,255,.78); }
.cfg-hero .matswitch { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.cfg-hero .matswitch button { color: rgba(255,255,255,.8); }
.cfg-hero .matswitch button.is-on { background: var(--accent); color: #fff; }
.bch-eyebrow-licht { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bch-oranje-helder); }
.bch-eyebrow-licht::before { content: ""; display: inline-block; height: 2px; width: 1.5rem; background: var(--bch-oranje-helder); }
.cfg-hero .presets { margin-inline: 0; max-width: none; }
.cfg-hero .presets__row { justify-content: flex-start; }
.bch-kruimels { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 1.4rem; font-size: .92rem; color: rgba(255,255,255,.7); }
/* Minder lege ruimte tussen configurator, AI-foto en de rest van de pagina. */
.sectie { padding-block: clamp(3rem, 6vh, 5rem); }
/* Stappenbalk op smalle schermen: één rij die zijwaarts scrolt, met leesbare labels. */
@media (max-width: 720px) {
  .ng-guided .ng-steps { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .ng-guided .ng-steps::-webkit-scrollbar { display: none; }
  .ng-guided .ng-steps button { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; padding: 10px 14px; font-size: .82rem; }
}
.bch-kruimels a { color: rgba(255,255,255,.7); text-decoration: none; }
.bch-kruimels a:hover { color: #fff; }
.bch-kruimels li { display: inline-flex; align-items: center; gap: .6rem; }
.bch-kruimels li + li::before { content: "›"; color: rgba(255,255,255,.5); }
.bch-kruimels [aria-current] { color: #fff; }

/* ------------------------------------------------------------------ */
/* Lichte inhoudsblokken onder de configurator (zoals de Next-pagina's) */
.bch-licht { background: var(--bch-wit); color: var(--bch-tekst); font-size: 1.0625rem; line-height: 1.65; }
.bch-licht h2, .bch-licht h3 { color: var(--bch-inkt); font-weight: 700; letter-spacing: -.015em; line-height: 1.08; text-wrap: balance; }
.bch-licht a { color: inherit; }
.bch-sectie { padding-block: 4rem; }
@media (min-width: 640px) { .bch-sectie { padding-block: 6rem; } }
.bch-sectie--zacht { background: var(--bch-zacht); }
.bch-grid-2 { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .bch-grid-2 { grid-template-columns: .8fr 1.2fr; } }
.bch-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bch-oranje-donker); }
.bch-eyebrow::before { content: ""; display: inline-block; height: 2px; width: 1.5rem; background: var(--bch-oranje); }
.bch-h-sectie { margin-top: .9rem; font-size: 2rem; letter-spacing: -.02em; }
@media (min-width: 640px) { .bch-h-sectie { font-size: 2.6rem; } }
@media (min-width: 1024px) { .bch-h-sectie { font-size: 3.1rem; } }
.bch-intro { margin-top: 1.1rem; font-size: 1.15rem; line-height: 1.6; max-width: 40rem; }
.bch-stappen { display: grid; gap: 1.25rem; counter-reset: stap; }
@media (min-width: 640px) { .bch-stappen { grid-template-columns: 1fr 1fr; } }
.bch-stappen li { border: 1px solid var(--bch-lijn); border-radius: var(--bch-radius); background: #fff; padding: 1.5rem; }
.bch-stappen .bch-stap-nr { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bch-oranje-donker); font-variant-numeric: tabular-nums; }
.bch-stappen h3 { margin-top: .5rem; font-size: 1.15rem; }
.bch-stappen p { margin-top: .5rem; line-height: 1.6; }

/* veelgestelde vragen */
.bch-faq { display: grid; gap: .75rem; }
.bch-faq details { border: 1px solid var(--bch-lijn); border-radius: var(--bch-radius); background: #fff; }
.bch-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--bch-inkt); font-size: 1.05rem; }
.bch-faq summary::-webkit-details-marker { display: none; }
.bch-faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #fbe3dc; color: var(--bch-oranje); font-weight: 700; font-size: 1.2rem; transition: transform .2s; }
.bch-faq details[open] summary::after { transform: rotate(45deg); }
.bch-faq details p { padding: 0 1.4rem 1.3rem; line-height: 1.65; }

/* artikelen */
.bch-artikelen { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .bch-artikelen { grid-template-columns: repeat(3, 1fr); } }
.bch-artikel { display: flex; flex-direction: column; border: 1px solid var(--bch-lijn); border-radius: var(--bch-radius); background: #fff; padding: 1.6rem; text-decoration: none; transition: transform .25s, box-shadow .25s; box-shadow: 0 1px 2px rgba(30,30,42,.04), 0 12px 32px -12px rgba(30,30,42,.18); }
.bch-artikel:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px rgba(14,26,43,.35); }
.bch-artikel .bch-artikel-meta { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bch-oranje-donker); }
.bch-artikel h3 { margin-top: .75rem; font-size: 1.2rem; }
.bch-artikel p { margin-top: .75rem; line-height: 1.6; }
.bch-artikel .bch-lees { margin-top: auto; padding-top: 1.25rem; font-weight: 700; color: var(--bch-inkt); display: inline-flex; align-items: center; gap: .4rem; }
.bch-artikel:hover .bch-lees { color: var(--bch-oranje); }
.bch-lees svg { width: 1rem; height: 1rem; color: var(--bch-oranje); }
.bch-links { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.bch-links a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--bch-inkt); text-decoration: none; }
.bch-links a:hover { color: var(--bch-oranje); }
.bch-links svg { width: 1rem; height: 1rem; color: var(--bch-oranje); }

/* oranje slotband */
.bch-cta { position: relative; overflow: hidden; background: var(--bch-oranje); color: #fff; padding-block: 5rem 7rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.bch-cta::after { content: ""; position: absolute; right: -6vw; top: -10vw; width: 34vw; height: 34vw; background: rgba(255,255,255,.08); transform: rotate(45deg); border-radius: 3rem; pointer-events: none; }
.bch-cta .bch-container { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .bch-cta .bch-container { grid-template-columns: 1.3fr .7fr; } }
.bch-cta h2 { color: #fff; font-size: 2.2rem; letter-spacing: -.02em; }
@media (min-width: 640px) { .bch-cta h2 { font-size: 3rem; } }
.bch-cta p { margin-top: 1rem; font-size: 1.15rem; max-width: 36rem; color: rgba(255,255,255,.92); }
.bch-cta .bch-btn { justify-self: start; min-height: 3.5rem; padding-inline: 2rem; }
@media (min-width: 1024px) { .bch-cta .bch-btn { justify-self: end; } }

/* ------------------------------------------------------------------ */
/* Voet, zoals Footer.tsx                                               */
.bch-voet { background: var(--bch-nacht); color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.65; margin-top: -4vw; padding-top: 4vw; }
.bch-voet-grid { display: grid; gap: 3rem; padding-block: 4rem 3rem; }
@media (min-width: 768px) { .bch-voet-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .bch-voet-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.bch-voet .bch-logo span { color: var(--bch-oranje); }
.bch-voet-over { margin-top: 1.5rem; max-width: 24rem; }
.bch-voet-contact { margin-top: 1.5rem; display: grid; gap: .625rem; }
.bch-voet-contact a, .bch-voet-contact span { display: inline-flex; align-items: flex-start; gap: .625rem; color: #fff; font-weight: 700; text-decoration: none; }
.bch-voet-contact span { font-weight: 400; color: rgba(255,255,255,.75); }
.bch-voet-contact svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--bch-oranje); margin-top: .2rem; }
.bch-voet-contact .bch-concept-noot { font-size: .9rem; color: var(--bch-oranje); }
.bch-voet-kop { margin-bottom: 1rem; font-weight: 700; letter-spacing: .02em; color: #fff; }
.bch-voet ul { display: grid; gap: .625rem; }
.bch-voet ul.bch-voet-2k { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.bch-voet nav a { color: inherit; text-decoration: none; }
.bch-voet nav a:hover { color: var(--bch-oranje); }
.bch-voet nav a.is-sterk { font-weight: 700; color: #fff; }
.bch-voet-alle { display: inline-block; margin-top: 1rem; font-weight: 700; color: #fff; text-decoration: none; }
.bch-voet-alle:hover { color: var(--bch-oranje); }
.bch-voet-onder { border-top: 1px solid rgba(255,255,255,.1); }
.bch-voet-onder .bch-container { display: flex; flex-direction: column; gap: .75rem; padding-block: 1.5rem; font-size: .92rem; }
@media (min-width: 640px) { .bch-voet-onder .bch-container { flex-direction: row; align-items: center; justify-content: space-between; } }
.bch-voet-onder ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.bch-voet-onder a { color: inherit; text-decoration: none; }
.bch-voet-onder a:hover { color: var(--bch-oranje); }
/* ruimte voor de vaste prijsbalk van de configurator op mobiel */
.bch-voet-ruimte { height: 5rem; }
@media (min-width: 900px) { .bch-voet-ruimte { display: none; } }

@media print { .bch-kop, .bch-menu, .bch-voet, .bch-licht, .bch-concept { display: none !important; } }

/* De schermvul-knop op het beeld moet klikbaar blijven ondanks de beeldbeveiliging (pointer-events:none op .conf__hero). */
.conf__hero button { pointer-events: auto; }

/* Het meeplakkende beeld blijft onder de vaste sitekop vandaan. */
@media (min-width: 900px) { .conf__visual { top: calc(var(--bch-kop) + 1.25rem) !important; } }