/* ==========================================================================
   Apparaatpagina's met tabbladen (22 september 2026)
   Geleverd als bnb-productpagina.css bij Project/apparaatpaginas-2026-09-22/;
   hier als eigen stylesheet, geladen op elke pagina waarvan de inhoud de marker
   "bnb-buycard" bevat (functions.php). Alle elf apparaatpagina's gebruiken deze
   opmaak; product-bb.css hoort bij de oude opbouw en blijft alleen nog staan voor de
   themapagina's en de pagina Business Starterspakket die er regels uit lenen.
   Alle regels hangen aan de el_class-namen (bnb-…) uit de Bold Builder-code,
   zodat andere pagina's niet geraakt worden.
   ========================================================================== */
:root{
  --bnb-accent:#cdad7b;   /* tan */
  --bnb-dark:#3b3b3b;     /* inkt */
  --bnb-beige:#f4f0ec;
  --bnb-body:#8c857a;
  --bnb-hairline:rgba(59,59,59,.12);
  --bnb-em:"Playfair Display",Georgia,"Times New Roman",serif;
}

/* Koppen: cursief deel in Playfair, zoals in het ontwerp */
[class*="bnb-"] .bt_bb_headline em{font-family:var(--bnb-em);font-style:italic;font-weight:400;letter-spacing:0}
/* Eén klasse minder dan het thema, zodat de regels per sectie hieronder (tan band, stappen)
   er nog overheen kunnen zonder !important. */
[class*="bnb-"] .bt_bb_headline_superheadline{
  display:block;font-size:.8125rem;letter-spacing:2px;text-transform:uppercase;font-weight:400;
  color:var(--bnb-accent);margin-bottom:1rem}

/* 1. Hero */
.bt_bb_section.bnb-hero{margin:20px;border-radius:20px;overflow:hidden;min-height:clamp(420px,52vw,560px);display:flex;align-items:flex-end;position:relative}
/* Leesbaarheid van de witte tekst op de kopfoto (22 sep 2026): het thema maakt van dark_solid
   maar een lichte beige multiply, te zwak voor een lichte foto. Verloop van transparant boven
   naar donker onder, waar het kruimelpad, de titel en de inleiding staan. */
.bt_bb_section.bnb-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.15) 0%,rgba(20,18,16,.35) 42%,rgba(20,18,16,.78) 100%)}
/* Alleen de inhoudskolom boven het verloop tillen. Niet "> *": de drager van de achtergrondfoto
   (.bt_bb_background_image_holder_wrapper) is een sibling en moet absoluut gepositioneerd blijven,
   anders wordt hij 0 hoog en zie je de kopfoto helemaal niet meer. */
.bt_bb_section.bnb-hero > .bt_bb_port{position:relative;z-index:1}
.bnb-hero .bt_bb_headline_content,.bnb-hero .bt_bb_headline_tag{color:#fff}
.bnb-hero .bt_bb_headline_subheadline{color:rgba(255,255,255,.88);font-size:1.0625rem;line-height:1.7;max-width:60ch;margin-top:1.1rem}

/* 2. Kaart met prijs en knoppen
   De builder kleurt kolommen met .bt_bb_row_holder .bt_bb_column .bt_bb_column_content
   (drie klassen) en zet img's op height:auto via .bt_bb_image img; de kaartregels hieronder
   staan daarom met de builderklassen ervoor, anders winnen die van het element. */
.bt_bb_row_holder .bt_bb_column.bnb-buycard > .bt_bb_column_content{background:#fff;border-radius:20px;padding:29px}
@media (min-width:1001px){.bt_bb_row_holder .bt_bb_column.bnb-buycard > .bt_bb_column_content{position:sticky;top:110px}}
.bt_bb_image.bnb-buy-media img{background:var(--bnb-beige);border-radius:15px;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:1.5rem}
.bnb-rule{border-color:var(--bnb-hairline)!important}
.bnb-price .bt_bb_headline_content{color:var(--bnb-dark);font-size:1.5rem;font-weight:500}
.bnb-price .bt_bb_headline_subheadline{color:var(--bnb-body);font-size:.875rem}
/* Het thema laat knoppen zweven (float:left), ook op volle breedte; de vinklijst eronder
   liep daardoor om de twee knoppen heen. In de kaart staan ze gewoon onder elkaar. */
.bnb-buycard .bt_bb_button{float:none;clear:both;margin-top:.6rem}
.bnb-buycard .bnb-card-meta{clear:both;margin-top:1.1rem}
.bnb-checks{list-style:none;padding:0;margin:0}
.bnb-checks li{position:relative;padding-left:1.6em;margin:.45em 0;line-height:1.5}
.bnb-checks li::before{content:"";position:absolute;left:0;top:.35em;width:.9em;height:.5em;
  border-left:2px solid var(--bnb-accent);border-bottom:2px solid var(--bnb-accent);transform:rotate(-45deg)}

/* Tabs */
.bt_bb_tabs.bnb-tabs{display:block;margin-top:1.75rem}
.bt_bb_tabs.bnb-tabs ul.bt_bb_tabs_header{border-bottom:1px solid var(--bnb-hairline);display:flex;flex-wrap:wrap;gap:1.5rem}
/* Tabkoppen als het hoofdmenu: Plus Jakarta Sans 16px, geen kapitalen, geen spatiëring, inkt,
   en onder het actieve tabblad hetzelfde dunne streepje van 1px als onder een menu-item. */
.bnb-tabs .bt_bb_tabs_header li{background:none!important;border:0!important;padding:0 0 .7rem!important;
  font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--bnb-body);
  border-bottom:1px solid transparent!important;cursor:pointer;transition:color .2s}
.bt_bb_tabs.bnb-tabs ul.bt_bb_tabs_header li span{font-size:1rem;letter-spacing:normal;text-transform:none;color:inherit}
.bnb-tabs .bt_bb_tabs_header li:hover{color:var(--bnb-dark)}
.bnb-tabs .bt_bb_tabs_header li.on{color:var(--bnb-dark);border-bottom-color:var(--bnb-dark)!important}
.bnb-tabs .bt_bb_tab_content{padding:1.75rem 0 0}
.bnb-tabs p{line-height:1.8;max-width:64ch}
/* Tussenkop in een tabblad ("Werking" onder de beschrijving): kleiner dan de kop van de sectie,
   met lucht erboven. */
.bnb-tabs .bnb-tabkop{font-size:1.25rem;font-weight:500;color:var(--bnb-dark);margin:2.25rem 0 .75rem;letter-spacing:0}
.bnb-tabs .bnb-tabkop:first-child{margin-top:0}
.bnb-tabs ol{padding-left:1.2em;line-height:1.7}
.bnb-tabs ol li{margin-bottom:.6em}

/* Specificatietabel */
.bnb-spec{width:100%;border-collapse:collapse;font-size:.9375rem}
.bnb-spec th,.bnb-spec td{text-align:left;vertical-align:top;padding:.7rem 0;border-bottom:1px solid var(--bnb-hairline)}
.bnb-spec th{width:40%;font-weight:500;color:var(--bnb-dark);padding-right:1rem}
.bnb-small{font-size:.875rem}

/* 3 en 5. Starterspakket en stappen */
.bt_bb_row_holder .bt_bb_column.bnb-align-end > .bt_bb_column_content{text-align:right}
@media (max-width:991px){.bt_bb_row_holder .bt_bb_column.bnb-align-end > .bt_bb_column_content{text-align:left}}
.bt_bb_row_holder .bt_bb_column.bnb-pack > .bt_bb_column_content{border-top:1px solid var(--bnb-hairline);padding-top:1.25rem}
.bnb-step .bt_bb_headline_superheadline{
  width:56px;height:56px;border-radius:50%;border:1px solid var(--bnb-accent);
  display:grid;place-items:center;letter-spacing:0;font-size:1rem;color:var(--bnb-dark)}

/* 4. Tan band */
.bt_bb_section.bnb-band-tan{margin:0 20px;border-radius:20px}
/* Lichte tekst op de tan ondergrond, zoals op de apparaatpagina van vóór 22 sep
   (dezelfde regels als .bnb-product-band in product-bb.css). */
.bnb-band-tan > .bt_bb_port{padding-top:clamp(3.5em,6vw,6em)!important;padding-bottom:clamp(3.5em,6vw,6em)!important}
.bnb-band-tan .bt_bb_headline{max-width:720px;margin-bottom:2.5em}
.bnb-band-tan .bt_bb_headline_superheadline{color:rgba(255,255,255,.7)}
.bnb-band-tan .bt_bb_service,
.bnb-band-tan .bt_bb_service .bt_bb_service_content_title,
.bnb-band-tan .bt_bb_service .bt_bb_service_content_text{color:var(--light-color)}
@media (max-width:991px){.bnb-band-tan .bt_bb_column + .bt_bb_column{margin-top:2em}}

/* 6. Veelgestelde vragen */
/* Het thema haalt de haarlijn weg bij stijl "simple" (.bt_bb_style_simple.bt_bb_accordion …). */
.bt_bb_accordion.bnb-faq .bt_bb_accordion_item{border-bottom:1px solid var(--bnb-hairline)}
.bnb-faq .bt_bb_accordion_item_title{color:var(--bnb-dark);font-weight:500;padding:1.1rem 0;background:none!important}
.bnb-faq .bt_bb_accordion_item_content{padding:0 0 1.1rem}

/* 7. Productkaarten */
.bt_bb_row_holder .bt_bb_column.bnb-pcard > .bt_bb_column_content{background:#fff;border-radius:20px;padding:18px;height:100%}
.bt_bb_image.bnb-pcard-media img{background:var(--bnb-beige);border-radius:15px;aspect-ratio:1/1;object-fit:contain;width:100%;height:auto}
.bnb-pcard .bt_bb_headline a{color:var(--bnb-dark);text-decoration:none}

/* Knoppen: geen eigen stijl. De knoppen dragen sinds 22 sep weer de stijlen van het thema
   (filled/outline/clean met kleurschema en pijltje), zoals op de rest van de site. */

/* 8. Afsluitende oproep */
.bt_bb_section.bnb-cta{margin:20px;border-radius:20px;overflow:hidden}
.bnb-cta .bt_bb_headline_content{color:#fff}
.bnb-cta .bt_bb_button{margin:1.5rem .6rem 0 0}

.bnb-cta-contact,.bnb-cta-contact a{color:rgba(255,255,255,.75);font-size:.875rem;margin-top:1.5rem}
.bnb-cta-img img{border-radius:15px}


/* --- Leaseblok (inc/lease.php) ---------------------------------------------
   De sectie komt tussen de secties van deze pagina te staan, met spacing "none";
   geef hem dezelfde ruimte boven en onder als de secties eromheen (30px per kant,
   de "normal"-spacing van het thema). Opmaak zelf: assets/css/lease.css. */
.bt_bb_section.bnb-lease > .bt_bb_port{padding-top:30px;padding-bottom:30px}

/* --- Plek van de inhoud op een portfolio-item ------------------------------
   Het thema zet boven portfolio-items --post-margin-top (4em) en legt de inhoud
   in een raster (foto, tekst, meta naast elkaar); zonder die onderdelen rekt de
   kolom de secties buiten het scherm. Hier is de inhoud de hele pagina.
   Zelfde regels als in product-bb.css. */
body.single-portfolio .site-content{margin-top:0}
body.single-portfolio article.portfolio .entry-content{display:block}