/* ============================================================================
   meb590.com — de eigen laag bovenop avantis.css + kern.css.

   Zusterbestand van tools/migratie-vda355/assets/vda355.css: dezelfde reeks,
   hetzelfde designsysteem (Avantis 2.0 "Industrial Precision"). Wat hier staat
   is alleen wat deze site nodig heeft en Avantis niet:

   1. .meb-eind    — het doorverwijsblok onderaan elke pagina. Dit is de reden
                     dat meb590.com bestaat: linkwaarde en bezoekers doorgeven
                     aan avantisenergy.eu.
   2. .meb-verwant — verwante pagina's, zodat geen enkele pagina doodloopt.
   3. .meb-kaart   — de onderwerpen op de homepage.
   4. .maat        — de maattekening in de hero (zie assets/maat.svg.fragment).

   Het grote verschil met vda355.com zit in punt 4. Daar is de hero een
   interactieve explosietekening van een module; hier is het een maattekening
   met de drie afmetingen die de naam van dit domein verklaren (590 mm).
   Bewust géén gegenereerd beeld en géén geleende explosietekening: de
   proporties in deze tekening komen uit de catalogusmaten en zijn dus
   controleerbaar.

   Voeg hier niets toe dat in avantis.css thuishoort; dat bestand is een
   woordelijke kopie van avantisenergy.eu en moet gelijk blijven aan het origineel.
   ========================================================================== */

/* --------------------------------------------- 1. doorverwijzing naar Avantis */
.meb-eind { margin-top: clamp(3rem, 6vw, 5rem); }
.meb-eind .meb-eind-label {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--metal-dark);          /* label op donker: 4.7:1 op graphite */
  margin: 0 0 1rem;
  max-width: none;
}
.meb-eind h2 { max-width: 22ch; margin-inline: auto; }
.meb-eind p { color: var(--metal); }
.meb-eind .meb-eind-ctas { margin-top: 1.8rem; align-items: flex-start; }
/* knop + bijschrift als één kolom, zodat het paar op mobiel bij elkaar blijft */
.meb-eind-knop { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.meb-eind-knop small { font-size: .85rem; color: var(--metal); }
@media (max-width: 560px) {
  .meb-eind .meb-eind-ctas { flex-direction: column; align-items: stretch; }
  .meb-eind-knop { align-items: stretch; }
  .meb-eind .btn { width: 100%; max-width: 22rem; margin-inline: auto; justify-content: center; }
}
.meb-eind .btn-ghost { border-color: var(--white); color: var(--white); }
.meb-eind .btn-ghost:hover { background: var(--white); color: var(--ink); }

/* ------------------------------------------------------ 2. verwante pagina's */
.meb-verwant {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.meb-verwant-label {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-light);
  margin-bottom: .9rem;
}
.meb-verwant ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.meb-verwant a {
  text-decoration: none;
  font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: box-shadow .2s var(--ease-out);
}
.meb-verwant a:hover { box-shadow: inset 0 -2px 0 var(--accent); }

/* -------------------------------------------- 3. onderwerpkaarten (homepage) */
/* Vaste kolommen in plaats van auto-fit: auto-fit gaf bij vda355.com op
   961–1240 px drie kaarten plus een wees. Twee kolommen tot 1200 px, dan vier. */
.meb-kaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 1200px) { .meb-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .meb-kaarten { grid-template-columns: minmax(0, 1fr); } }
.meb-kaart {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: background .25s var(--ease-out);
}
.meb-kaart:hover { background: var(--white); }
.meb-kaart:focus-visible { outline-offset: -3px; }   /* binnen de kaart, anders overlapt de buur */
.meb-kaart h3 { font-size: 1.25rem; }
.meb-kaart p { font-size: .95rem; color: var(--ink-soft); }
.meb-kaart-lees {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.meb-kaart-lees::after { content: " →"; }

/* ------------------------------------------------- kerncijferstrip (homepage) */
/* .key-specs uit kern.css, met een bronregel erboven: elk cijfer komt uit de
   Avantis-catalogus en de lezer mag zien waar. */
.meb-specs { margin-top: clamp(2rem, 4vw, 3rem); }
.meb-specs-bron {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label-light);
  max-width: none;
}
.meb-specs .key-specs { max-width: none; margin-top: .9rem; }
.meb-specs .key-specs > div { background: var(--bg); padding: 1rem 1.1rem; }
.meb-specs .key-specs b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  display: block;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.meb-specs .key-specs .mono {
  display: block;
  margin-top: .25rem;
  font-size: .78rem;
  color: var(--label-light);
}

/* ------------------------------------------------------- 4. maattekening ---- */
/* De hero. Drie maten, één module, geen versiering. De tekening schaalt mee
   met het paneel en heeft een maximale hoogte zodat het beeldpaneel niet boven
   de tekstkolom uittorent — zelfde afspraak als bij vda355.com. */
.kern-hero-visual .maat { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.maat svg { width: 100%; height: auto; max-height: 460px; display: block; }
.maat-cijfer { font-family: var(--font-mono); font-size: 15px; fill: var(--ink); letter-spacing: .04em; }
.maat-label  { font-family: var(--font-mono); font-size: 12px; fill: var(--label-light); letter-spacing: .1em; }
.maat-lijn   { stroke: var(--ink-mute); stroke-width: 1; }
.maat-vlak   { fill: var(--white); stroke: var(--ink); stroke-width: 1.4; }
.maat-cel    { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.maat-accent { stroke: var(--accent); stroke-width: 1.6; }
.maat-bron {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--label-light);
}
@media (max-width: 960px) { .maat svg { max-height: 46vh; } }
/* kern.css zet het beeld op mobiel bóven de kop (order:-1) — goed voor een
   productfoto, hier niet: de kop en de CTA's horen eerst. */
@media (max-width: 900px) {
  .kern-hero-visual { order: 0; min-height: 0; }
  .maat svg { max-height: 34vh; }
}

/* ------------------------------------------------------------ specificaties */
/* De specificatietabel is de kern van /specifications/. kern.css heeft
   .table-scroll; hier alleen de leesbaarheid van getallenkolommen. */
.prose table { font-variant-numeric: tabular-nums; }
.prose table td:first-child, .prose table th:first-child { white-space: nowrap; }
.meb-bronregel {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--label-light);
  margin-top: .8rem;
}

/* ------------------------------------------------------------------ artikel */
.meb-artikel .prose p { line-height: 1.75; }
.meb-artikel-datum {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--label-light);
}

/* ---------------------------------------------------------------- navigatie */
/* Het woordmerk is tekst, geen beeld: nooit laten afbreken over twee regels.
   De offerteknop blijft op élke breedte in de balk staan; onder 560 px toont
   CSS het korte label. Beide regels komen uit de hermeting van vda355.com. */
.nav-logo { white-space: nowrap; letter-spacing: .14em; font-size: .82rem; }
.nav-cta { white-space: nowrap; }
.nav-cta-kort { display: none; }
@media (max-width: 560px) {
  .nav-cta { padding: .5rem .75rem; }
  .nav-cta-lang { display: none; }
  .nav-cta-kort { display: inline; }
}
/* avantis.css klapt het menu onder 1100 px dicht — daar staan zeven items en
   een taalwisselaar. Hier vijf korte labels die op 1024 px ruim passen. */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-menu > summary { display: none; }
  .nav-menu .nav-links {
    position: static; flex-direction: row; gap: clamp(.9rem, 1.7vw, 1.7rem);
    padding: 0; border: 0; background: none;
  }
  .nav-menu .nav-links a { display: inline; padding: 0; border: 0; font-size: .92rem; }
}

/* --------------------------------------------------- voettekst: twee kolommen */
/* avantis.css rekent op vier kolommen (2fr 1fr 1fr 1fr); met twee kolommen
   bleef rechts de helft leeg. */
.site-foot .foot-grid { grid-template-columns: 2fr 1fr; }
@media (max-width: 700px) { .site-foot .foot-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- skip-link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: var(--z-modal);
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus-visible { top: 1rem; }

/* ------------------------------------------------------- ritme en haarlijnen */
/* Het dal tussen de secties. avantis.css geeft elke <section> var(--sec-y)
   boven én onder — op 1440 px is dat 136 + 136 = 272 px leeg tussen de
   kerncijferstrip en de volgende kop. Op een pagina van vier korte secties
   valt de site daardoor uit elkaar. Halveren, niet weghalen: het ruime ritme
   is onderdeel van het Avantis-systeem. */
.meb-intro { padding-block: calc(var(--sec-y) * .6) calc(var(--sec-y) * .5); }
.meb-kaarten-sec { padding-top: calc(var(--sec-y) * .5); }
.prose-wrap .crumbs { max-width: 46rem; }              /* kruimel volgt de kophaarlijn */
.foot-wordmark { letter-spacing: .14em; }