/* ============================================================
   lb.vloeren — opmaak voor alle pagina's
   Kleuren, typografie en blokken. Tekst past u aan in de HTML.
   ============================================================ */

:root {
  --bg: #0E0C0A;
  --bg-card: #16130F;
  --bg-deep: #050505;
  --ink: #F4F1EC;
  --ink-soft: #B8B2AA;
  --ink-mute: #6E675F;
  --line: rgba(201, 160, 99, 0.22);
  --line-sterk: rgba(201, 160, 99, 0.34);
  --goud: #C9A063;
  --goud-licht: #E3C89B;
  --goud-diep: #8C6B3C;

  --kop: Futura, "Avenir Next", "Century Gothic", "Poppins", system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, "SFMono-Regular", monospace;
  --tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --breedte: 1180px;
  --rand: 40px;
  --blok: 88px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

a { color: var(--goud-licht); }
a:hover { color: var(--ink); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 3px;
}

h1, h2, h3 { font-family: var(--kop); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.goud { color: var(--goud); }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--goud); color: var(--bg); padding: 12px 18px;
  font: 600 14px/1 var(--mono); z-index: 100;
}
.overslaan:focus { left: 12px; top: 12px; }

.alleen-lezer {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.omhulsel { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kop en navigatie ---------- */

.kop {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}

.kop__rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 0;
}

.merk { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.merk img { height: 44px; width: auto; flex: none; }
.merk__naam { display: flex; flex-direction: column; gap: 3px; }
.merk__naam b { font-family: var(--kop); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.merk__naam span {
  font: 11px/1 var(--mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}

.kop__rechts { display: flex; align-items: center; gap: 12px; }

.telknop {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-sterk); border-radius: 4px;
  text-decoration: none; color: var(--ink);
  font: 14px/1 var(--mono); letter-spacing: 0.04em; white-space: nowrap;
}
.telknop:hover { border-color: var(--goud); color: var(--goud-licht); }

.menuknop {
  display: none; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--line-sterk); border-radius: 4px;
  color: var(--ink); font: 13px/1 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
}

.nav { border-top: 1px solid var(--line); }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 28px;
}
.nav a {
  display: inline-flex; align-items: center; min-height: 46px;
  text-decoration: none; color: var(--ink-soft);
  font: 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--goud-licht); border-bottom-color: var(--goud); }

/* ---------- Sectiekop ---------- */

.sectie { border-bottom: 1px solid var(--line); }
.sectie__inhoud { padding: var(--blok) 0; }

.sectiekop { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; }
.sectiekop__nr { flex: 0 0 120px; font: 13px/1 var(--mono); color: var(--ink-mute); padding-top: 8px; }
.sectiekop__titel { flex: 1 1 320px; min-width: 0; }
.sectiekop__intro { flex: 1 1 300px; min-width: 0; }
.sectiekop__intro p { max-width: 46ch; font-size: 15px; color: var(--ink-soft); }

.eyebrow {
  display: block; margin-bottom: 14px;
  font: 12px/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--goud);
}

/* line-height ruim genoeg dat een stok (l, d) niet tegen een staart (g, p) van de regel erboven komt */
h1 { font-size: clamp(48px, 7.4vw, 78px); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.02; }
h3 { font-size: 19px; letter-spacing: -0.01em; }

.lood { max-width: 46ch; font-size: 16px; color: var(--ink-soft); }
.tekst { max-width: 46ch; font-size: 16px; color: var(--ink-soft); }
.tekst + .tekst { margin-top: 18px; }
.klein { max-width: 46ch; font-size: 15px; color: var(--ink-soft); }

/* ---------- Hero ---------- */

.hero { background: var(--bg-deep); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero__gloed {
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 880px; height: 580px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 160, 99, 0.16), rgba(201, 160, 99, 0) 100%);
}
.hero__rij { position: relative; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: var(--blok) 0; }
.hero__tekst { flex: 1 1 420px; min-width: 0; }
.hero__beeld { flex: 1 1 380px; min-width: 0; }
.hero h1 { margin-bottom: 24px; }
.hero .lood { margin-bottom: 32px; }
.hero--kort .hero__rij { padding: 64px 0; }

/* ---------- Knoppen ---------- */

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

.knop {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 4px;
  text-decoration: none; font: 15px/1.2 var(--mono); letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.knop--goud { background: var(--goud); color: var(--bg); font-weight: 600; }
.knop--goud:hover { background: var(--goud-licht); color: var(--bg); }
.knop--lijn { border-color: var(--line-sterk); color: var(--ink); }
.knop--lijn:hover { border-color: var(--goud); color: var(--goud-licht); }
.knop--groot { min-height: 56px; padding: 0 26px; font-size: 16px; }

.doorlink {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font: 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--goud-licht); text-decoration: underline; text-underline-offset: 5px;
}
.doorlink:hover { color: var(--ink); }
.doorlink svg { flex: none; }

/* ---------- Beeld ---------- */

.beeld {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(115deg, #16130F 0 14px, #12100C 14px 28px);
}
.beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Label voor een plek waar de foto nog moet komen. Staat gecentreerd op de
   gestreepte achtergrond, zodat een lege plek er bedoeld uitziet. Zodra er een
   foto in staat hoort er geen label overheen. */
.beeld figcaption,
.beeld .label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font: 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center;
}
.beeld img ~ figcaption,
.beeld img ~ .label { display: none; }
.beeld--hoog { aspect-ratio: 3 / 4; }
.beeld--breed { aspect-ratio: 16 / 9; }

.beelden { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.beelden figure { margin: 0; }

/* ---------- Rasters ---------- */

.raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  gap: 1px; background: var(--line);
}
.raster > * { background: var(--bg-card); padding: 32px 28px 34px; margin: 0; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.kaart {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 4px; padding: 32px 28px 34px;
}
.kaart--accent { background: linear-gradient(160deg, #1B1712, #12100C 60%); border-color: var(--line-sterk); }
.kaart h3, .raster h3 { margin-bottom: 10px; }
.kaart p, .raster p { font-size: 15px; color: var(--ink-soft); }
.kaart svg, .raster svg { margin-bottom: 20px; }

.stapnr { font: 300 44px/1 var(--mono); color: var(--goud-diep); margin-bottom: 22px; }

ol.raster, ul.raster, ul.lijst { list-style: none; }

.lijst { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 52ch; }
.lijst li { display: flex; gap: 14px; font-size: 15px; color: var(--ink-soft); }
.lijst svg { flex: none; margin-top: 2px; }

.tweekolom { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.tweekolom > * { flex: 1 1 380px; min-width: 0; }

/* ---------- Vragen ---------- */

.vragen { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.vragen details { background: var(--bg-card); border-bottom: 1px solid var(--line); }
.vragen details:last-child { border-bottom: 0; }
.vragen summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 22px 26px;
  font-family: var(--kop); font-size: 17px; color: var(--ink);
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; font: 15px/1 var(--mono); color: var(--goud); }
.vragen details[open] summary::after { content: "–"; }
.vragen p { padding: 0 26px 26px; max-width: 52ch; font-size: 15px; color: var(--ink-soft); }

/* ---------- Contactblok ---------- */

.contactblok { position: relative; background: var(--bg-deep); overflow: hidden; }
.contactblok__gloed {
  position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 160, 99, 0.20), rgba(201, 160, 99, 0) 100%);
}
.contactblok .omhulsel { position: relative; }
.contactblok__rij { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding: var(--blok) 0; }
.contactblok__rij > * { flex: 1 1 380px; min-width: 0; }
.contactblok h2 { margin: 0 0 20px; }

.gegevens {
  background: var(--bg-card); border: 1px solid var(--line-sterk); border-radius: 4px;
  padding: 32px 28px; display: flex; flex-direction: column; gap: 22px;
}
.gegeven { display: flex; align-items: center; gap: 16px; min-height: 44px; text-decoration: none; color: var(--ink); }
.gegeven:hover { color: var(--goud-licht); }
.gegeven svg { flex: none; }
.gegeven span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gegeven small {
  font: 11px/1 var(--mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.gegeven b {
  font: 400 19px/1.2 var(--mono);
  text-decoration: underline; text-underline-offset: 4px;
}
.gegeven b.smal { font-size: 15px; line-height: 1.3; word-break: break-all; }

/* ---------- Voet ---------- */

.voet { background: var(--bg-deep); border-top: 1px solid var(--line); }
.voet__rij { display: flex; flex-wrap: wrap; gap: 40px; padding: 56px 0 40px; }
.voet__kolom { flex: 1 1 220px; min-width: 0; }
.voet h2 {
  font: 12px/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--goud); margin: 0 0 18px;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.voet a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; text-decoration: none; color: var(--ink-soft); }
.voet a:hover { color: var(--goud-licht); text-decoration: underline; text-underline-offset: 4px; }
.voet__mono a, .voet__mono span { font-family: var(--mono); font-size: 14px; }
.voet__merk { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.voet__merk img { height: 30px; width: auto; opacity: 0.85; }
.voet__slot {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  border-top: 1px solid var(--line); padding: 22px 0 28px;
  font: 12px/1.6 var(--mono); letter-spacing: 0.06em; color: var(--ink-mute);
}

/* ---------- Vaste balk op mobiel ---------- */

.mbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.mbalk a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; text-decoration: none; font: 15px/1 var(--mono);
}
.mbalk .bellen { background: var(--goud); color: var(--bg); font-weight: 600; }
.mbalk .appen { background: var(--bg-card); color: var(--ink); }

/* ---------- Rustige fade bij scrollen ---------- */

/* De fade geldt alleen als JavaScript draait. Zonder JS blijft alles zichtbaar,
   anders zou de hele pagina blanco zijn als het script niet laadt. */
.js .fade { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.fade.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Breekpunten ---------- */

@media (max-width: 960px) {
  :root { --blok: 64px; }
  .sectiekop { gap: 16px; margin-bottom: 40px; }
  .sectiekop__nr { flex: 0 0 100%; padding-top: 0; }
  .hero__rij, .contactblok__rij, .tweekolom { gap: 32px; }
}

@media (max-width: 620px) {
  :root { --rand: 20px; --blok: 48px; }
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .kop__rij { padding: 14px 0; }
  .merk img { height: 38px; }
  .merk__naam span { display: none; }
  .telknop span { display: none; }
  .telknop { padding: 0 14px; }
  .menuknop { display: inline-flex; }
  /* Navigatie klapt open met de knop */
  .nav { display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { min-height: 52px; width: 100%; border-bottom: 0; border-left: 2px solid transparent; padding-left: 12px; margin: 0; }
  .nav a[aria-current="page"] { border-left-color: var(--goud); }
  .mbalk { display: grid; }
  body { padding-bottom: 56px; }
  .raster > *, .kaart { padding: 26px 22px 28px; }
  .vragen summary { padding: 20px 20px; }
  .vragen p { padding: 0 20px 22px; }
}

@media print {
  .mbalk, .menuknop, .nav, .hero__gloed, .contactblok__gloed { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Logo van de partner ---------- */

/* Zolang img/oaklyn-logo.png er niet is, blijft het gouden label zichtbaar. */
.partnerlogo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  margin-bottom: 22px;
}
.partnerlogo img { height: 54px; width: auto; }
.partnerlogo__site {
  font: 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--goud-licht); text-decoration: underline; text-underline-offset: 5px;
}
.partnerlogo__site:hover { color: var(--ink); }
@media (max-width: 620px) { .partnerlogo img { height: 42px; } }
.partnerlogo span {
  font: 11px/1.4 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--goud-diep);
}
.partnerlogo img:not([hidden]) ~ span { display: none; }

/* ---------- Voordeelblok: het prijsvoordeel via lb.vloeren ---------- */
.voordeel {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 22px; padding: 20px 22px;
  border: 1px solid var(--goud); border-radius: 4px;
  background: linear-gradient(180deg, rgba(201,160,99,0.10), rgba(201,160,99,0.03));
}
.voordeel svg { flex: 0 0 22px; color: var(--goud); margin: 2px 0 0; }
.voordeel b {
  display: block; color: var(--goud-licht);
  font-size: 16px; line-height: 1.35; letter-spacing: -0.01em;
}
.voordeel span {
  display: block; margin-top: 7px;
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
@media (max-width: 620px) {
  .voordeel { padding: 17px 18px; gap: 13px; }
  .voordeel b { font-size: 15px; }
}

/* ---------- Raster met een vast aantal kolommen ----------
   auto-fit rekent zelf uit hoeveel kolommen er passen, en laat dan bijna
   altijd een vak leeg. Daarom per aantal items een vaste indeling die
   altijd opgaat: het aantal kolommen is steeds een deler van het aantal
   kaarten. Zet op het raster de klasse die bij het aantal items hoort. */
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--6 { grid-template-columns: repeat(3, 1fr); }
/* Zeven kaarten: drie rijen van drie gaat niet op, dus de laatste
   loopt over de volle breedte. Dan blijft er nooit een vak leeg. */
.raster--7 { grid-template-columns: repeat(3, 1fr); }
.raster--7 > *:last-child { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .raster--6,
  .raster--7 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .raster--3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .raster--4,
  .raster--6,
  .raster--7 { grid-template-columns: 1fr; }
}

/* ---------- Partnerblok: de verwijzing naar Oaklyn ---------- */
.partnerblok {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px;
  margin-top: 20px;
  border: 1px solid var(--line-sterk); border-radius: 4px;
  background: var(--line); overflow: hidden;
}
.partnerblok__tekst,
.partnerblok__actie { padding: 34px 32px; }
.partnerblok__tekst { background: linear-gradient(160deg, #1B1712, #12100C 65%); }
.partnerblok__tekst h3 { font-size: 24px; }
.partnerblok__actie {
  background: var(--bg-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.partnerblok__actie .knop { width: 100%; justify-content: center; text-align: center; }

.partnerblok__punten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.partnerblok__punten li { display: flex; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.partnerblok__punten svg { flex: none; margin-top: 3px; color: var(--goud); }
.partnerblok__punten b { color: var(--goud-licht); font-weight: 600; }

.partnerblok__voet {
  display: flex; align-items: center; gap: 9px; margin-top: auto;
  font: 11px/1.4 var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.partnerblok__voet svg { flex: none; }

@media (max-width: 900px) {
  .partnerblok { grid-template-columns: 1fr; }
  .partnerblok__tekst, .partnerblok__actie { padding: 26px 22px; }
}

/* ---------- Troeven onder de hero ----------
   Vier korte punten die de bezoeker in één oogopslag laten zien waar
   lb.vloeren voor staat. Alleen dingen die elders op de site worden
   waargemaakt, geen loze claims. */
.troeven {
  list-style: none; margin: 26px 0 32px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px; max-width: 620px;
}
.troeven li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-soft);
}
.troeven svg { flex: none; margin-top: 2px; color: var(--goud); }
@media (max-width: 620px) {
  .troeven { grid-template-columns: 1fr; gap: 10px; margin: 22px 0 26px; }
}

/* ---------- Oproepblok halverwege een pagina ----------
   Zachter dan het contactblok onderaan, zodat het niet schreeuwt, maar wel
   opvalt: wie halverwege overtuigd is hoeft niet door te scrollen. */
.oproep {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(201,160,99,0.07), rgba(201,160,99,0.02));
}
.oproep__rij {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding: 36px 0;
}
.oproep__tekst {
  flex: 1 1 340px; min-width: 0; max-width: 52ch;
  font-family: var(--kop); font-size: 21px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
@media (max-width: 620px) {
  .oproep__rij { padding: 28px 0; gap: 18px; }
  .oproep__tekst { font-size: 18px; }
}