/* ---------------------------------------------------------------------------
   MX Wholesale, landingspagina. Zelfde kleuren als de demo.
   --------------------------------------------------------------------------- */

:root {
  --zwart:    #16181D;
  --paneel:   #23262E;
  --paneel-2: #1C1F25;
  --rand:     #2F333C;
  --rand-fel: #3C414C;
  --accent:   #FF6B1A;
  --accent-in:#FF8340;
  --licht:    #F5F4F2;
  --grijs:    #6B6F76;
  --grijs-op: #9CA1A9;
  --groen:    #3FA66A;
  --rood:     #D4553F;
  --r:        10px;
  --r-klein:  6px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--zwart);
  color: var(--licht);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.18; }
p { margin: 0 0 14px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.zacht { color: var(--grijs); font-size: 13px; font-weight: 400; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */

.header { position: sticky; top: 0; z-index: 40; background: var(--paneel-2); border-bottom: 1px solid var(--rand); }
.header-binnen { display: flex; align-items: center; gap: 28px; height: 70px; }
.logo { text-decoration: none; display: flex; align-items: center; flex-shrink: 0; }
/* Het logo draagt nu de slogan mee, dus het moet groter dan de oude 30 pixels:
   op die hoogte was de regel eronder niet meer te lezen. */
.logo-beeld { height: 42px; width: auto; display: block; }
.hoofdnav { display: flex; gap: 24px; flex: 1; }
.navlink { text-decoration: none; color: var(--grijs-op); font-size: 14px; }
.navlink:hover { color: var(--licht); }
.header-rechts { display: flex; gap: 10px; }

/* ---------- taalkiezer in de kop ---------- */

/* details/summary in plaats van een menu op JavaScript: werkt met de muis, met
   het toetsenbord, en ook als er niets laadt. */
.taalkiezer { position: relative; }
.taalkiezer > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rand-fel); border-radius: var(--r-klein);
  padding: 8px 12px; font-size: 13px; color: var(--grijs-op);
}
.taalkiezer > summary::-webkit-details-marker { display: none; }
.taalkiezer > summary::after { content: "\25BE"; font-size: 10px; color: var(--grijs); }
.taalkiezer[open] > summary::after { content: "\25B4"; }
.taalkiezer > summary:hover { color: var(--licht); border-color: var(--grijs-op); }
.taalcode { font-weight: 600; color: var(--licht); letter-spacing: 0.02em; }

.taalmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 190px; display: flex; flex-direction: column;
  background: var(--paneel); border: 1px solid var(--rand-fel);
  border-radius: var(--r); padding: 6px; gap: 2px;
}
.taalitem {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-klein);
  text-decoration: none; font-size: 14px; color: var(--grijs-op);
}
.taalitem:hover { background: var(--paneel-2); color: var(--licht); }
.taalitem-actief { background: var(--paneel-2); color: var(--licht); }

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-klein);
  padding: 13px 22px; font: inherit; font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knop-klein { padding: 9px 15px; font-size: 13px; }
.knop-primair { background: var(--accent); color: #1A1005; border-color: var(--accent); font-weight: 600; }
.knop-primair:hover { background: var(--accent-in); border-color: var(--accent-in); }
.knop-stil { background: transparent; color: var(--licht); border-color: var(--rand-fel); }
.knop-stil:hover { border-color: var(--grijs-op); }
.knop-breed { width: 100%; }

/* ---------- hero ---------- */

.hero { background: var(--paneel-2); border-bottom: 1px solid var(--rand); padding: 72px 0 60px; }
.hero-binnen { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.hero h1 { font-size: 44px; max-width: 15ch; }
.hero-lead { margin-top: 18px; color: var(--grijs-op); font-size: 17px; max-width: 54ch; }
.hero-lever { margin-top: 12px; font-size: 14px; color: var(--grijs-op); max-width: 54ch; border-left: 2px solid var(--accent); padding-left: 12px; }
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-sub { margin-top: 14px; font-size: 13px; color: var(--grijs); }

.usps { display: flex; flex-direction: column; gap: 22px; }
.usp { border-top: 1px solid var(--rand); padding-top: 14px; }
.usp h2 { font-size: 15px; margin-bottom: 4px; }
.usp p { font-size: 14px; color: var(--grijs-op); margin: 0; }

/* ---------- blokken ---------- */

.blok { padding: 72px 0; }
.blok-stil { background: var(--paneel-2); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.blok-titel { font-size: 30px; margin-bottom: 12px; }
.blok-lead { color: var(--grijs-op); max-width: 64ch; margin-bottom: 30px; }

.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kaart { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r); padding: 22px; }
.kaart h3 { font-size: 16px; margin-bottom: 6px; }
.kaart p { font-size: 14px; color: var(--grijs-op); margin: 0; }

.stappen { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Vijf stappen in drie kolommen laat twee gaten; bij vijf kolommen wordt elke
   kolom te smal voor de tekst. Automatisch vullen vanaf 210 pixels dus. */
.stappen-vijf { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stap-plan { font-size: 14px; color: var(--grijs-op); margin: 0 0 6px; padding-left: 12px; border-left: 2px solid var(--rand-fel); }
.stappen li { counter-increment: s; border-top: 2px solid var(--accent); padding-top: 16px; }
.stappen li::before { content: counter(s); display: block; color: var(--accent); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.stappen h3 { font-size: 17px; margin-bottom: 6px; }
.stappen p { font-size: 14px; color: var(--grijs-op); margin: 0; }

/* Twee gelijkwaardige kaarten. Pro krijgt de accentrand en de volle knop,
   maar niet meer ruimte: wie handmatig bestelt moet zich in Basic herkennen en
   niet het gevoel krijgen dat hij op de tweede rang zit. */
.plannen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r); padding: 26px;
}
.plan-pro { border-color: var(--accent); }
.plan-kop { margin-bottom: 18px; }
.plan-naam { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.plan-badge {
  display: inline-block; margin-left: 4px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1A1005; background: var(--accent); border-radius: 999px; padding: 2px 7px;
}
.plan-bedrag { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 0; }
.plan-bedrag small { font-size: 15px; font-weight: 400; color: var(--grijs); letter-spacing: 0; }
.plan-voor { font-size: 14px; color: var(--grijs-op); margin: 10px 0 0; }
.plan-meer { font-size: 13px; font-weight: 600; color: var(--licht); margin: 0 0 8px; }
.plan-regels { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-regels li { font-size: 14px; color: var(--grijs-op); padding-left: 18px; position: relative; }
.plan-regels li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.prijs-noot { margin: 22px 0 0; font-size: 14px; color: var(--grijs); max-width: 76ch; }

/* Abonnement en bestellingen zijn twee verschillende betalingen. */
.betaalblok { margin-top: 36px; border-top: 1px solid var(--rand); padding-top: 28px; }
.betaalblok h3 { font-size: 19px; margin-bottom: 10px; }
.betaalblok p { color: var(--grijs-op); max-width: 76ch; }
.betaal-kop { font-size: 13px; font-weight: 600; color: var(--licht); margin: 18px 0 10px; }
.betaalmethoden { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.betaalmethoden li {
  font-size: 13px; color: var(--grijs-op);
  border: 1px solid var(--rand-fel); border-radius: 999px; padding: 5px 12px;
}

/* ---------- assortiment ---------- */

.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 36px; }
.cijfer { border-top: 2px solid var(--accent); padding-top: 16px; }
.cijfer-getal { display: block; font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.cijfer-bij { display: block; margin-top: 6px; font-size: 14px; color: var(--grijs-op); max-width: 26ch; }

/* Categorieën, geen links: de catalogus zelf blijft achter de login. */
.categorieen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.categorieen li {
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r-klein);
  padding: 12px 15px; font-size: 14px; color: var(--grijs-op);
}
.ass-slot { margin: 24px 0 0; font-size: 14px; color: var(--grijs); max-width: 70ch; }

/* ---------- formulier ---------- */

.paneel { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--r); padding: 26px; }
.formulier { max-width: 740px; }
.formrij { margin-bottom: 18px; }
.formrij label { display: block; font-size: 14px; color: var(--grijs-op); margin-bottom: 6px; }
.formrij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; background: var(--paneel-2); border: 1px solid var(--rand-fel);
  border-radius: var(--r-klein); color: var(--licht); font: inherit; font-size: 15px; padding: 12px 13px;
}
textarea { resize: vertical; line-height: 1.5; }
select { appearance: none; }
.hint { display: block; font-size: 12px; color: var(--grijs); margin-top: 6px; }
.fout { display: block; color: var(--rood); font-size: 13px; margin-top: 6px; }
.formrij-fout input, .formrij-fout select, .formrij-fout textarea { border-color: var(--rood); }
.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bevestiging { max-width: 640px; }
.bevestiging-cirkel {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 18px;
}
.bevestiging h3 { font-size: 21px; margin-bottom: 10px; }
.bevestiging p { color: var(--grijs-op); margin: 0; }
.waarschuwing { color: var(--accent); font-size: 14px; margin-top: 14px; }

.blok-eis { color: var(--grijs); font-size: 14px; max-width: 76ch; margin: -18px 0 30px; }

.formveld-plan { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.formveld-plan legend { font-size: 14px; color: var(--grijs-op); margin-bottom: 8px; padding: 0; }
.keuze {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--paneel-2); border: 1px solid var(--rand-fel);
  border-radius: var(--r-klein); padding: 12px 13px; margin-bottom: 8px;
  font-size: 15px; color: var(--licht);
}
.keuze:hover { border-color: var(--grijs-op); }
.keuze input { width: auto; accent-color: var(--accent); }
.keuze:has(input:checked) { border-color: var(--accent); }

/* ---------- vragen ---------- */

.vragen { max-width: 76ch; border-top: 1px solid var(--rand); }
.vraag { border-bottom: 1px solid var(--rand); }
.vraag summary {
  cursor: pointer; padding: 18px 0; font-size: 16px; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: 20px;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; }
.vraag[open] summary::after { content: "\2013"; }
.vraag p { color: var(--grijs-op); font-size: 15px; margin: 0 0 18px; max-width: 70ch; }

/* ---------- merkenbalk ---------- */

.merken { padding: 56px 0; border-top: 1px solid var(--rand); }
.merken-titel { font-size: 15px; font-weight: 500; color: var(--grijs-op); margin-bottom: 20px; }
.merken-subtitel { font-size: 13px; font-weight: 500; color: var(--grijs); margin: 26px 0 12px; }

/* Geen carrousel en geen autoplay: een rij die op een breed scherm gewoon
   doorloopt en op een smal scherm horizontaal schuift. */
.merkenrij {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 30px;
}
/* De balk is gemengd: een deel van de merken heeft een logobestand, de rest
   toont zijn naam. Om dat één geheel te laten zijn zijn de logo's witte
   silhouetten op dezelfde optische hoogte als de tekst, met dezelfde
   doorzichtigheid. Grijstinten zijn hier zinloos -- ze zijn al monochroom --
   dus oplichten bij hover is het enige verschil. */
.merk { display: flex; align-items: center; opacity: 0.55; transition: opacity 0.15s; }
/* Twintig pixels, niet zesentwintig: een logo vult zijn hele hoogte terwijl
   een merknaam alleen de letterhoogte vult. Op gelijke pixelhoogte wegen de
   logo's daardoor zwaarder en valt de rij uiteen in "beeld" en "tekst". */
.merk img { display: block; height: 20px; width: auto; max-width: 120px; object-fit: contain; }
.merk:hover { opacity: 1; }

/* De terugval zolang er geen logobestand is: de merknaam als wordmark. */
.merk-tekst {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--licht); white-space: nowrap; line-height: 20px;
}
.merk-tekst:hover { opacity: 1; }
.merk-klein.merk-tekst { font-size: 13px; font-weight: 500; }
.merk-klein img { height: 22px; max-width: 96px; }
.merkenrij-klein { gap: 12px 24px; }

.merken-oem { margin: 24px 0 0; font-size: 13px; color: var(--grijs); max-width: 78ch; }

/* ---------- footer ---------- */

.footer { background: var(--paneel-2); border-top: 1px solid var(--rand); padding: 48px 0 36px; }
.footer-boven { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--rand); }
.footer-logo { height: 40px; width: auto; display: block; margin-bottom: 14px; }
.footer-tekst { color: var(--grijs-op); font-size: 14px; max-width: 46ch; }
.footer-contact { color: var(--grijs-op); font-size: 14px; }

.demoblok h2 { font-size: 17px; margin-bottom: 6px; }
.demoblok p { font-size: 14px; color: var(--grijs-op); }
.demorij { display: flex; gap: 10px; margin-top: 6px; }
.demorij input { max-width: 200px; }

.footer-gegevens { margin-top: 14px; font-style: normal; font-size: 13px; color: var(--grijs); line-height: 1.7; }
.footer-juridisch { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-juridisch a { font-size: 13px; color: var(--grijs-op); text-decoration: none; }
.footer-juridisch a:hover { color: var(--licht); text-decoration: underline; }

.avg { font-size: 13px; color: var(--grijs); margin: 0 0 18px; max-width: 70ch; }
.avg a { color: var(--grijs-op); }

/* ---------- juridisch blad ---------- */

.blad { padding: 56px 0 72px; }
.blad-kop { max-width: 72ch; margin-bottom: 34px; }
.blad-kop h1 { font-size: 34px; margin-bottom: 12px; }
.blad-lead { color: var(--grijs-op); margin: 0; }
.blad-datum { display: block; margin-top: 14px; font-size: 13px; color: var(--grijs); }
.blad-sectie { max-width: 72ch; margin-bottom: 30px; }
.blad-sectie h2 { font-size: 19px; margin-bottom: 10px; }
.blad-sectie p { color: var(--grijs-op); }
.blad-terug { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--grijs-op); }

.footer-balk { display: flex; row-gap: 14px; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; }
.talen { display: flex; gap: 8px; flex-wrap: wrap; }
.taalknop {
  text-decoration: none; font-size: 13px; color: var(--grijs-op);
  border: 1px solid var(--rand-fel); border-radius: 999px; padding: 6px 13px;
}
.taalknop:hover { color: var(--licht); }
.taalknop-actief { background: var(--licht); border-color: var(--licht); color: var(--zwart); font-weight: 500; }

/* ---------- cookiemelding ---------- */

.cookiebalk {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  max-width: 900px; margin: 0 auto;
  background: var(--paneel); border: 1px solid var(--rand-fel);
  border-radius: var(--r); padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.cookiebalk[hidden] { display: none; }
.cookiebalk p { margin: 0; font-size: 13px; color: var(--grijs-op); line-height: 1.55; }
.cookiebalk a { color: var(--licht); }
.cookiebalk .knop { flex-shrink: 0; }

/* ---------- klein scherm ---------- */

@media (max-width: 960px) {
  .hero-binnen, .footer-boven { grid-template-columns: 1fr; gap: 34px; }
  .plannen { grid-template-columns: 1fr; gap: 16px; }
  .hero h1 { font-size: 34px; max-width: none; }
  .kaarten, .stappen { grid-template-columns: repeat(2, 1fr); }
  .cijfer-getal { font-size: 32px; }
}

@media (max-width: 680px) {
  .header-binnen { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 10px 18px; }
  .hoofdnav { order: 3; width: 100%; gap: 16px; overflow-x: auto; }
  .header-rechts { margin-left: auto; }
  .hero { padding: 44px 0 40px; }
  .hero h1 { font-size: 28px; }
  .blok { padding: 48px 0; }
  .blok-titel { font-size: 24px; }
  .kaarten, .stappen, .formrij-2, .cijfers, .plannen { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
  .logo-beeld { height: 32px; }

  .cookiebalk { flex-direction: column; align-items: flex-start; gap: 12px; left: 12px; right: 12px; bottom: 12px; }
  .cookiebalk .knop { width: 100%; }

  /* Op een telefoon past de rij niet; dan schuift hij horizontaal in plaats
     van dat hij over acht regels uitwaaiert. */
  .merkenrij {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .merk { flex-shrink: 0; }

  /* De kiezer zweeft niet boven de pagina maar duwt het menu open, zodat hij
     onderdeel is van de kop in plaats van een los element eroverheen. */
  .taalkiezer { position: static; }
  .taalmenu {
    position: static; margin-top: 8px; width: 100%;
    display: grid; grid-template-columns: repeat(2, 1fr);
  }
  .taalkiezer[open] { width: 100%; order: 4; }
  .header-rechts { flex-wrap: wrap; gap: 10px; }
}