/* ============================================================================
   Membrane Systems Europe | Landingspagina Litouwen
   Huisstijl afgeleid van biogasmembrane.com, zie assets/brand.md
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Litouwse diakritieken (ą č ę ė į š ų ū ž) vallen in dit bereik. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ 2. Variabelen */

:root {
  /* Kleuren, letterlijk uit de stylesheet van biogasmembrane.com */
  /* MSE gebruikt #ec6446 als vulkleur van knoppen met witte tekst en #40ab35
     als hoverkleur. Beide combinaties halen de contrasteis van 4.5:1 niet
     (3,24:1 en 2,96:1). Daarom staan hieronder twee sets: de merkkleuren zelf
     voor randen, vinkjes, accentlijnen en alles zonder tekst erop, en een
     iets donkerdere variant voor vlakken waar witte tekst op staat en voor
     gekleurde tekst op wit. Het verschil is klein genoeg om als dezelfde
     huisstijl te lezen. Zie assets/brand.md en de README. */
  --mse-accent: #ec6446;          /* merkkleur, randen en accenten zonder tekst */
  --mse-accent-btn: #cd482f;      /* vulkleur knop, wit erop = 4,60:1 */
  --mse-accent-text: #b4401f;     /* oranje tekst op wit = 5,69:1 */
  --mse-accent-dark: #9c3517;     /* foutmeldingen en chiptekst = 6,62:1 */
  --mse-green: #40ab35;           /* merkgroen, vinkjes en randen */
  --mse-green-btn: #2b8524;       /* groene vulkleur knop, wit erop = 4,68:1 */
  --mse-green-dark: #096f39;      /* donkergroen, uit #to-top, tekst = 6,28:1 */
  --mse-ink: #323232;             /* bodytekst en koppen */
  --mse-ink-soft: #5d5b5b;
  --mse-white: #ffffff;
  --mse-border: #767676;          /* rand invoervelden, 4,54:1 op wit */
  --mse-green-light: #9fd29a;     /* focusring op donkere vlakken, 9,13:1 */

  /* Afgeleid voor deze pagina, consistent met de palette */
  --mse-surface: #f4f6f4;
  --mse-surface-2: #e9ede9;
  --mse-line: #e2e5e2;
  --mse-dark: #1f2420;

  /* Typografie */
  --ff: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --lh-head: 1.2;                 /* MSE: 120% op koppen */
  --lh-body: 1.8;                 /* MSE: 180% op bodytekst */

  /* Vorm */
  --radius: 10px;                 /* MSE: border-radius 10px */
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(31, 36, 32, .06), 0 8px 24px rgba(31, 36, 32, .07);
  --shadow-lift: 0 2px 4px rgba(31, 36, 32, .08), 0 16px 40px rgba(31, 36, 32, .12);

  /* Ritme */
  --gutter: 20px;
  --maxw: 1180px;
  --section-y: 72px;
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --section-y: 104px; }
}

/* ---------------------------------------------------------------- 3. Reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--mse-ink);
  background: var(--mse-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 12px;
  line-height: var(--lh-head);
  color: var(--mse-ink);
  font-weight: 800;              /* MSE: koppen zijn extra bold */
  text-transform: uppercase;     /* MSE: koppen zijn uppercase */
  letter-spacing: .005em;
}

h4 { text-transform: none; font-weight: 700; line-height: 1.5; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 16px; padding-left: 0; list-style: none; }

a { color: var(--mse-accent-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--mse-green-dark); text-decoration: none; }

strong, b { font-weight: 700; }

/* Zichtbare focus overal. De MSE-site verandert alleen de randkleur,
   dat haalt de contrasteis niet. */
:focus-visible {
  outline: 3px solid var(--mse-green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Op donkere vlakken haalt #096f39 de 3:1 van WCAG 1.4.11 niet (2,51:1 op
   #1f2420 en 2,04:1 op #323232). Daar een lichte ring: 9,13:1 respectievelijk
   7,42:1. De witte formulierkaart binnen .section--dark houdt bewust de
   donkergroene ring, want die staat op wit. */
.hero__left :focus-visible,
.fsec__side :focus-visible,
.foot :focus-visible,
.reviewbar :focus-visible { outline-color: var(--mse-green-light); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 200;
  background: var(--mse-white);
  color: var(--mse-ink);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- 4. Layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--mse-surface); }
.section--dark { background: var(--mse-dark); color: #e8ece8; }
.section--dark h2, .section--dark h3 { color: var(--mse-white); }

/* De witte formulierkaart staat binnen een donkere sectie. Zonder deze regel
   erft de kop daar de witte kleur en verdwijnt hij in de kaart. */
.section--dark .fcard,
.section--dark .fcard h2,
.section--dark .fcard h3,
.section--dark .fcard h4,
.section--dark .fcard p,
.section--dark .fcard label,
.section--dark .fcard li { color: var(--mse-ink); }
.section--dark .fcard .field__opt,
.section--dark .fcard .reassure,
.section--dark .fcard .reqnote,
.section--dark .fcard .upl__hint,
.section--dark .fcard .recap__title,
.section--dark .fcard .prog__row { color: var(--mse-ink-soft); }
.section--dark .fcard .err { color: var(--mse-accent-dark); }
.section--dark .fcard .step__hi { color: var(--mse-green-dark); }

.section__head { max-width: 62ch; margin-bottom: 36px; }
.section__head h2 { font-size: clamp(22px, 3.2vw, 30px); }
.section__head p { color: var(--mse-ink-soft); margin-bottom: 0; }
.section--dark .section__head p { color: #b9c2ba; }

/* ---------------------------------------------- 5. Knoppen, MSE-signatuur */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 32px;
  min-height: 48px;
  background: var(--mse-accent-btn);
  border: 1px solid var(--mse-accent-btn);
  border-radius: var(--radius);
  color: var(--mse-white);
  font-family: var(--ff);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .1s ease;
}

/* Op de MSE-site wisselt een knop op hover van oranje naar groen. */
.btn:hover,
.btn:focus-visible {
  background: var(--mse-green-btn);
  border-color: var(--mse-green-btn);
  color: var(--mse-white);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn__chev { flex: none; width: 7px; height: 12px; }

.btn--block { width: 100%; }
.btn--lg { padding: 17px 36px; min-height: 58px; font-size: 17px; }

.btn--ghost {
  background: transparent;
  color: var(--mse-ink);
  border-color: var(--mse-ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--mse-accent-btn);
  border-color: var(--mse-accent-btn);
  color: var(--mse-white);
}

.btn--on-dark { background: var(--mse-accent-btn); border-color: var(--mse-accent-btn); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: .65; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--mse-accent-btn); border-color: var(--mse-accent-btn); }

/* Tekstlink die naar het formulier scrollt */
.jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--mse-accent-text);
  text-decoration: none;
  border-bottom: 2px solid rgba(180, 64, 31, .35);
  padding-bottom: 1px;
  line-height: 1.4;
}
.jump:hover, .jump:focus-visible { color: var(--mse-green-dark); border-bottom-color: var(--mse-green-dark); }
.jump svg { flex: none; width: 6px; height: 11px; }

/* --------------------------------------- 6. Placeholder voor open punten */

.tbd {
  display: inline;
  padding: 1px 8px 2px;
  border: 1px dashed var(--mse-accent);
  border-radius: 6px;
  background: #fdefeb;
  color: var(--mse-accent-dark);
  font-size: .82em;
  font-weight: 700;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tbd::before { content: '?\00a0'; font-weight: 800; }
.section--dark .tbd,
.foot .tbd,
.hero__proof .tbd { border-color: #ffa78e; background: rgba(236, 100, 70, .22); color: #ffd9cd; }

/* ---------------------------------------------------- 7. Reviewbalk (demo) */

.reviewbar {
  background: var(--mse-ink);
  color: #f2f2f2;
  font-size: 13.5px;
  line-height: 1.5;
}
.reviewbar__in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 9px;
}
.reviewbar__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mse-accent);
}
.reviewbar p { margin: 0; flex: 1 1 auto; }
.reviewbar__nl { color: #a5a5a5; }
.reviewbar__x {
  flex: none;
  background: none; border: 0; padding: 6px 8px;
  color: #cfcfcf; cursor: pointer; font-size: 18px; line-height: 1;
  border-radius: 6px;
}
.reviewbar__x:hover { color: var(--mse-white); }

/* ------------------------------------------------------------- 8. Hero */

.hero {
  position: relative;
  background: var(--mse-dark);
  color: var(--mse-white);
  overflow: hidden;
}

/* Op mobiel is de hero heel hoog, omdat het formulier erin staat. De foto
   vult daar alleen het bovenste deel; daaronder loopt hij weg in de donkere
   achtergrond. Anders zou een liggende foto tot onbruikbare uitvergroting
   moeten worden opgerekt en zou er onnodig veel data geladen worden. */
.hero__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: center 58%;
  z-index: 0;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(23, 28, 24, .84) 0%, rgba(23, 28, 24, .74) 38%, rgba(23, 28, 24, .95) 600px, var(--mse-dark) 640px);
}

@media (min-width: 1000px) {
  .hero__bg { height: 100%; object-position: center 62%; }
  .hero__veil {
    background:
      linear-gradient(100deg, rgba(20, 25, 21, .95) 0%, rgba(20, 25, 21, .9) 42%, rgba(20, 25, 21, .55) 70%, rgba(20, 25, 21, .45) 100%);
  }
}

.hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 32px;
  padding-block: 28px 44px;
}

@media (min-width: 1000px) {
  .hero__in {
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    gap: 56px;
    align-items: start;
    padding-block: 30px 56px;
  }
}

.hero__brand { margin-bottom: 26px; }
.hero__logo {
  width: 132px; height: 75px;
  background: var(--mse-white);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.hero__payoff {
  margin: 10px 0 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mse-green-light);
  font-weight: 700;
}

.hero h1 {
  color: var(--mse-white);
  font-size: clamp(27px, 4.6vw, 44px);
  line-height: 1.14;
  margin-bottom: 18px;
  text-wrap: balance;
}

.hero__intro {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: #dfe5e0;
  max-width: 54ch;
  margin-bottom: 24px;
}

.hero__bullets {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
}
@media (min-width: 620px) { .hero__bullets { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }

.hero__bullets li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #eef2ee;
  font-weight: 600;
}
/* Vinkje in merkgroen, zoals ul.green-checks op de MSE-site */
.hero__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: .18em;
  width: 19px; height: 19px;
  background: var(--mse-green);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .17);
}
.hero__proof li {
  flex: 1 1 150px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.hero__proof b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--mse-white);
  margin-bottom: 2px;
}
.hero__proof span {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b8c3b9;
  font-weight: 600;
}

/* ------------------------------------------------ 9. Formulierkaart */

.fcard {
  background: var(--mse-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  color: var(--mse-ink);
  overflow: hidden;
}
.fcard__head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--mse-line);
}
.fcard__head h2 { font-size: 19px; margin-bottom: 4px; }
.fcard__head p { font-size: 14.5px; color: var(--mse-ink-soft); margin: 0; line-height: 1.5; }
.fcard__body { padding: 20px 24px 24px; }

@media (min-width: 420px) {
  .fcard__head { padding: 26px 28px 20px; }
  .fcard__body { padding: 22px 28px 28px; }
}

/* Voortgang */
.prog { margin-bottom: 20px; }
.prog__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mse-ink-soft);
  margin-bottom: 7px;
}
.prog__track { height: 5px; background: var(--mse-surface-2); border-radius: 99px; overflow: hidden; }
.prog__bar {
  height: 100%; width: 50%;
  background: var(--mse-green);
  border-radius: 99px;
  transition: width .3s ease;
}

/* Stap 1: aanklikbare kaarten */
.qgroup { border: 0; padding: 0; margin: 0 0 22px; }
.qgroup:last-of-type { margin-bottom: 0; }
.qgroup__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--mse-ink);
  line-height: 1.4;
}
.qgroup__num {
  display: inline-block;
  min-width: 20px; height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mse-surface-2);
  color: var(--mse-ink-soft);
  font-size: 11.5px; font-weight: 800;
  text-align: center; line-height: 20px;
  vertical-align: 2px;
}

.opts { display: grid; gap: 8px; }

.opt { position: relative; display: block; }
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.opt__face {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 11px 15px;
  border: 1px solid var(--mse-border);
  border-radius: var(--radius);
  background: var(--mse-white);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.opt__face::before {
  content: '';
  flex: none;
  width: 19px; height: 19px;
  border: 2px solid var(--mse-border);
  border-radius: 50%;
  background: var(--mse-white);
  transition: border-color .15s ease, background .15s ease;
}
.opt__face:hover { border-color: var(--mse-green); background: #f6fbf5; }
.opt input:focus-visible + .opt__face {
  outline: 3px solid var(--mse-green-dark);
  outline-offset: 2px;
}
.opt input:checked + .opt__face {
  border-color: var(--mse-green);
  background: #f2f9f1;
  box-shadow: inset 0 0 0 1px var(--mse-green);
  font-weight: 600;
}
.opt input:checked + .opt__face::before {
  border-color: var(--mse-green);
  background: var(--mse-green);
  box-shadow: inset 0 0 0 3.5px var(--mse-white);
}

/* Samenvatting van stap 1 in stap 2 */
.recap {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--mse-surface);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius);
}
.recap__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.recap__title {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mse-ink-soft);
}
.recap__edit {
  background: none; border: 0; padding: 2px 4px;
  font-family: var(--ff); font-size: 13.5px; font-weight: 700;
  color: var(--mse-accent-text); cursor: pointer; text-decoration: underline;
  border-radius: 4px;
}
.recap__edit:hover { color: var(--mse-green-dark); }
.recap ul { margin: 0; display: grid; gap: 5px; }
.recap li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.45;
}
.recap li::before {
  content: '';
  flex: none;
  margin-top: .36em;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--mse-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 9px 9px;
}

/* Velden */
.field { margin-bottom: 15px; }
.field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mse-ink);
  line-height: 1.4;
}
.field__opt { font-weight: 400; color: var(--mse-ink-soft); font-size: 13px; }
.req { color: var(--mse-accent-text); font-weight: 700; margin-left: 2px; }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea {
  display: block;
  width: 100%;
  font-family: var(--ff);
  font-size: 16px;                /* 16px voorkomt inzoomen op iOS */
  line-height: 1.6;
  color: var(--mse-ink);
  padding: 11px 15px;
  border: 1px solid var(--mse-border);
  border-radius: var(--radius);
  background: var(--mse-white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #767676; } /* 4,54:1 op wit */
.field input:hover, .field textarea:hover { border-color: var(--mse-ink-soft); }
.field input:focus, .field textarea:focus {
  border-color: var(--mse-ink);
  box-shadow: 0 0 0 3px rgba(64, 171, 53, .18);
}

.field--bad input, .field--bad textarea { border-color: var(--mse-accent); }
.field--bad input:focus, .field--bad textarea:focus {
  box-shadow: 0 0 0 3px rgba(236, 100, 70, .18);
}

.err {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin-top: 5px;
  font-size: 13.5px;
  font-style: italic;             /* MSE: .validation_message is cursief */
  line-height: 1.45;
  color: var(--mse-accent-dark);
}
.field--bad .err, .err.is-on { display: flex; }
.err svg { flex: none; width: 15px; height: 15px; margin-top: .18em; }

.row2 { display: grid; gap: 15px; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; gap: 15px 16px; } }

/* Bestandsupload */
.upl { margin-bottom: 15px; }
.upl__box {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  border: 1px dashed var(--mse-border);
  border-radius: var(--radius);
  background: var(--mse-surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upl__box:hover { border-color: var(--mse-green); background: #f6fbf5; }
.upl input[type='file'] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upl input[type='file']:focus-visible + .upl__box { outline: 3px solid var(--mse-green-dark); outline-offset: 2px; }
.upl__ico { flex: none; width: 20px; height: 20px; color: var(--mse-green-dark); }
.upl__txt { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.upl__hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--mse-ink-soft); }
.upl__file {
  display: none;
  align-items: center; gap: 10px;
  margin-top: 8px; padding: 9px 12px;
  background: #f2f9f1; border: 1px solid var(--mse-green);
  border-radius: var(--radius);
  font-size: 13.5px;
}
.upl__file.is-on { display: flex; }
.upl__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl__rm {
  flex: none; background: none; border: 0; padding: 4px 6px;
  color: var(--mse-accent-text); font-family: var(--ff); font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: underline; border-radius: 4px;
}

/* Toestemming */
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 14px; }
.consent input[type='checkbox'] {
  flex: none;
  width: 21px; height: 21px;
  margin: 1px 0 0;
  accent-color: var(--mse-green);
  cursor: pointer;
}
.consent label { font-size: 13.5px; line-height: 1.55; color: var(--mse-ink); cursor: pointer; }
.consent--bad label { color: var(--mse-accent-dark); }

.honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reassure {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mse-ink-soft);
  text-align: center;
}
.reqnote { margin: 0 0 14px; font-size: 12.5px; color: var(--mse-ink-soft); }

/* Laadindicator in de knop */
.spin {
  display: none;
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: var(--mse-white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-sending .spin { display: block; }
.is-sending .btn__chev { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Foutmelding bij verzenden */
.sendfail {
  display: none;
  margin-top: 16px;
  padding: 15px 17px;
  border: 1px solid var(--mse-accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(236, 100, 70, .06);
}
.sendfail.is-on { display: block; }
.sendfail h3 { font-size: 15px; margin-bottom: 6px; color: var(--mse-accent-dark); }
.sendfail p { font-size: 14px; margin-bottom: 8px; }
.sendfail ul { margin: 0; display: grid; gap: 4px; font-size: 15px; font-weight: 700; }

.formnote { font-size: 13.5px; color: var(--mse-ink-soft); }

/* === EINDE KRITIEKE CSS === */

/* ------------------------------------------------- 10. Vertrouwensbalk */

.trust { background: var(--mse-surface); border-bottom: 1px solid var(--mse-line); }
.trust ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-block: 0;
}
@media (min-width: 700px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }

.trust li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 0;
}
@media (min-width: 700px) { .trust li { padding: 20px 22px 20px 0; } }

.trust__ico { flex: none; width: 21px; height: 21px; color: var(--mse-green); margin-top: 1px; }
.trust b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--mse-ink); }
.trust span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--mse-ink-soft); margin-top: 2px; }

/* ----------------------------------------------------- 11. Oplossingen */

.cards { display: grid; gap: 22px; }
@media (min-width: 780px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card__img { width: 100%; height: 200px; object-fit: cover; background: var(--mse-surface-2); }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.card__body h3 { font-size: 17px; margin-bottom: 9px; }
.card__body p { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.card__when { font-size: 14px; color: var(--mse-ink-soft); font-style: italic; }
.card__spec {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 16px; padding: 9px 13px;
  background: var(--mse-surface);
  border-left: 3px solid var(--mse-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px; font-weight: 700; line-height: 1.4;
}
.card__foot { margin-top: auto; }

.extra {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.extra p { font-size: 14.5px; margin: 0; flex: 1 1 380px; color: var(--mse-ink-soft); }

/* ------------------------------------------------------ 12. Specificaties */

.specs-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .specs-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; } }

.tablewrap {
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mse-white);
}
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; padding: 0 0 10px; font-size: 13px; color: var(--mse-ink-soft); }
th, td {
  text-align: left;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  border-bottom: 1px solid var(--mse-line);
  vertical-align: top;
}
thead th {
  background: var(--mse-ink);
  color: var(--mse-white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-block: 11px;
  border-bottom: 0;
}
tbody th { font-weight: 700; width: 40%; background: var(--mse-surface); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

.speclists { display: grid; gap: 22px; align-content: start; }
.speclist {
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.speclist h3 { font-size: 14px; margin-bottom: 12px; }
.speclist ul { margin: 0; display: grid; gap: 7px; }
.speclist li {
  position: relative;
  padding-left: 25px;
  font-size: 14.5px;
  line-height: 1.5;
}
.speclist li::before {
  content: '';
  position: absolute; left: 0; top: .34em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--mse-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}
.speclist--opt li::before {
  background: var(--mse-white);
  border: 2px solid var(--mse-border);
  background-image: none;
}

.specnote {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 4px; padding: 18px 20px;
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-left: 4px solid var(--mse-green);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.specnote p { flex: 1 1 400px; margin: 0; font-size: 15px; }

/* ---------------------------------------------------------- 13. Proces */

.steps { display: grid; gap: 4px; counter-reset: st; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); gap: 0; } }

.step { position: relative; padding: 0 0 26px 52px; counter-increment: st; }
@media (min-width: 900px) { .step { padding: 60px 20px 0 0; } }

.step::before {
  content: counter(st);
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mse-green);
  color: var(--mse-white);
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
/* verbindingslijn */
.step::after {
  content: '';
  position: absolute;
  left: 18px; top: 38px; bottom: 0;
  width: 2px;
  background: var(--mse-surface-2);
  z-index: 1;
}
.step:last-child::after { display: none; }

@media (min-width: 900px) {
  .step::after {
    left: 38px; top: 18px; bottom: auto;
    width: auto; right: 0; height: 2px;
  }
}

.step h3 { font-size: 14.5px; margin-bottom: 7px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--mse-ink-soft); margin: 0; }

.step__hi {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 12px;
  background: var(--mse-white);
  border: 1px solid var(--mse-green);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mse-green-dark);
}
.section--tint .step::after { background: #d8ded8; }

/* ------------------------------------------------------ 14. Referenties */

.balticnote {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-left: 4px solid var(--mse-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.balticnote__ico { flex: none; width: 22px; height: 22px; color: var(--mse-accent); margin-top: 3px; }
.balticnote h3 { font-size: 14px; margin-bottom: 5px; }
.balticnote p { font-size: 14.5px; line-height: 1.6; margin: 0; }

.refs { display: grid; gap: 20px; }
@media (min-width: 620px) { .refs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .refs { grid-template-columns: repeat(3, 1fr); } }

.ref {
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ref img { width: 100%; height: 178px; object-fit: cover; background: var(--mse-surface-2); }
.ref__cap { padding: 15px 17px 17px; }
.ref__place { font-size: 15.5px; font-weight: 800; text-transform: uppercase; line-height: 1.25; margin-bottom: 2px; }
.ref__meta {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mse-green-dark); margin-bottom: 8px;
}
.ref__size { font-size: 14px; line-height: 1.5; color: var(--mse-ink-soft); margin: 0; }

/* Montagetijd zoals MSE die zelf per project noemt. Groen als MSE zelf
   monteerde, neutraal als de klant dat deed. */
.ref__note {
  display: block;
  margin: 10px 0 0;
  padding: 6px 11px;
  background: #f2f9f1;
  border-left: 3px solid var(--mse-green);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mse-green-dark);
}
.ref__note--client {
  background: var(--mse-surface);
  border-left-color: var(--mse-border);
  color: var(--mse-ink-soft);
  font-weight: 600;
}

.reach { display: grid; gap: 26px; margin-top: 36px; align-items: center; }
@media (min-width: 860px) { .reach { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; } }
.reach h3 { font-size: 18px; margin-bottom: 10px; }
.reach p { font-size: 15px; color: var(--mse-ink-soft); }
.reach__count {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--mse-line);
}
.reach__count b { font-size: 22px; font-weight: 800; line-height: 1.2; }
.reach__count span { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--mse-ink-soft); font-weight: 700; }

.map { width: 100%; height: auto; }
.map__land { fill: #dfe4df; stroke: var(--mse-white); stroke-width: .7; }
.map__on { fill: var(--mse-green); }
.map__target { fill: var(--mse-accent); }
.maplegend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; }
.maplegend span { display: inline-flex; align-items: center; gap: 7px; color: var(--mse-ink-soft); }
.maplegend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mapcap { font-size: 12.5px; color: var(--mse-ink-soft); margin: 10px 0 0; line-height: 1.5; }

/* -------------------------------------------------------- 15. Bezwaren */

.objs__cta { margin: 26px 0 0; }

.objs { display: grid; gap: 22px; }
@media (min-width: 820px) { .objs { grid-template-columns: 1fr 1fr; gap: 30px; } }

.obj {
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.section--tint .obj { background: var(--mse-white); }
.obj h3 { font-size: 16px; line-height: 1.35; margin-bottom: 11px; }
.obj p { font-size: 15px; line-height: 1.7; margin-bottom: 0; }
.obj__extra {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--mse-line);
  font-size: 14px; font-weight: 600; color: var(--mse-ink);
}

/* ------------------------------------------------------------- 16. FAQ */

.faq { max-width: 860px; }
.faq details {
  border: 1px solid var(--mse-line);
  border-radius: var(--radius);
  background: var(--mse-white);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq details[open] { border-color: var(--mse-green); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mse-green-dark); }
.faq summary:focus-visible { outline: 3px solid var(--mse-green-dark); outline-offset: -3px; }
.faq__plus {
  flex: none; order: 2; margin-left: auto;
  width: 19px; height: 19px; margin-top: 2px;
  color: var(--mse-accent-text);
  transition: transform .2s ease;
}
.faq details[open] .faq__plus { transform: rotate(45deg); color: var(--mse-green); }
.faq__a { padding: 0 18px 18px; }
.faq__a p { font-size: 15px; line-height: 1.7; color: var(--mse-ink-soft); }
.faq__a .jump { margin-top: 4px; }

/* -------------------------------------------- 17. Formuliersectie onderaan */

.fsec { display: grid; gap: 30px; }
@media (min-width: 960px) { .fsec { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 46px; align-items: start; } }

.fsec__side h2 { font-size: clamp(22px, 3.2vw, 30px); margin-bottom: 14px; }
.fsec__side > p { color: #b9c2ba; font-size: 15.5px; }
.fsec__pts { margin: 22px 0 0; display: grid; gap: 10px; }
.fsec__pts li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.55; color: #e2e8e3; }
.fsec__pts li::before {
  content: '';
  position: absolute; left: 0; top: .32em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--mse-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}

.person {
  display: flex; align-items: center; gap: 15px;
  margin-top: 26px; padding: 16px 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
}
.person__ph {
  flex: none;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px dashed rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  color: #9fb0a1;
}
.person__ph svg { width: 26px; height: 26px; }
.person__t { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9fb0a1; margin-bottom: 4px; }
.person__n { font-size: 14.5px; line-height: 1.45; color: var(--mse-white); }
.person__r { font-size: 13px; line-height: 1.45; color: #b9c2ba; margin-top: 3px; }

.callout {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.callout__t { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9fb0a1; margin-bottom: 7px; }
.callout__n {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 21px; font-weight: 800; color: var(--mse-white);
  text-decoration: none; line-height: 1.3;
}
.callout__n:hover { color: var(--mse-green-light); }
.callout__n svg { width: 19px; height: 19px; flex: none; }
.callout p { font-size: 13px; color: #9fb0a1; margin: 6px 0 0; }

/* ----------------------------------------------------------- 18. Footer */

.foot { background: var(--mse-ink); color: #d7dbd7; padding-block: 44px 28px; }
.foot__grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }

.foot h2 { font-size: 14px; color: var(--mse-white); margin-bottom: 11px; }
.foot__t { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9a9f9a; margin-bottom: 11px; }
.foot address { font-style: normal; font-size: 14.5px; line-height: 1.75; }
.foot a { color: #d7dbd7; text-decoration: underline; }
.foot a:hover { color: var(--mse-green-light); }
.foot__logo { width: 104px; height: 59px; background: var(--mse-white); border-radius: 8px; padding: 6px 10px; margin-bottom: 16px; }
.foot__langs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; }
.foot__hours { font-size: 13.5px; line-height: 1.6; color: #9a9f9a; margin-top: 12px; }
.foot__bot {
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  font-size: 13px; color: #9a9f9a;
}
.foot__bot a { color: #9a9f9a; }

/* ------------------------------------------------ 19. Vaste mobiele balk */

.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--mse-line);
  box-shadow: 0 -4px 20px rgba(31, 36, 32, .1);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.sticky.is-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}
.sticky .btn { padding-inline: 12px; font-size: 15px; min-height: 50px; }
.sticky .btn--ghost { border-color: var(--mse-green-dark); color: var(--mse-green-dark); }
.sticky .btn--ghost:hover { background: var(--mse-green-dark); border-color: var(--mse-green-dark); color: var(--mse-white); }
.sticky svg { width: 16px; height: 16px; flex: none; }

@media (min-width: 900px) { .sticky { display: none; } }
@media (max-width: 899px) { body.has-sticky { padding-bottom: 76px; } }

/* --------------------------------------------------- 20. Cookiebanner */

.cookie {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 120;
  max-width: 480px;
  padding: 18px 20px;
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 900px) { .cookie { left: 24px; right: auto; bottom: 24px; } }
@media (max-width: 899px) { body.has-sticky .cookie { bottom: 80px; } }

.cookie[hidden] { display: none; }
.cookie p { font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie .btn { min-height: 44px; padding: 10px 14px; font-size: 14.5px; }
.cookie .btn--ghost { border-color: var(--mse-ink); }

/* --------------------------------------------------- 21. Bedankpagina */

.thanks { min-height: 100vh; display: flex; flex-direction: column; }
.thanks__main { flex: 1 1 auto; padding-block: 48px 64px; }
.thanks__bar { background: var(--mse-white); border-bottom: 1px solid var(--mse-line); padding-block: 14px; }
.thanks__logo { width: 116px; height: 66px; }

.thanks__card {
  max-width: 660px;
  background: var(--mse-white);
  border: 1px solid var(--mse-line);
  border-radius: var(--radius-lg);
  padding: 34px 28px 32px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 620px) { .thanks__card { padding: 42px 44px 38px; } }

.thanks__check {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--mse-green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.thanks__check svg { width: 30px; height: 30px; color: var(--mse-white); }
.thanks__card h1 { font-size: clamp(23px, 4vw, 31px); margin-bottom: 12px; }
.thanks__lead { font-size: 17px; line-height: 1.65; margin-bottom: 26px; }

.thanks__next { margin: 0 0 22px; padding: 20px 22px; background: var(--mse-surface); border-radius: var(--radius); }
.thanks__next h2 { font-size: 13px; margin-bottom: 12px; }
.thanks__next ol { margin: 0; display: grid; gap: 9px; counter-reset: tn; }
.thanks__next li {
  position: relative; padding-left: 32px;
  counter-increment: tn;
  font-size: 14.5px; line-height: 1.55;
}
.thanks__next li::before {
  content: counter(tn);
  position: absolute; left: 0; top: .1em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mse-green); color: var(--mse-white);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.thanks__spam { font-size: 13.5px; color: var(--mse-ink-soft); }
.thanks__urgent {
  margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--mse-line);
}
.thanks__urgent .foot__t { color: var(--mse-ink-soft); }
.thanks__phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 21px; font-weight: 800; color: var(--mse-ink); text-decoration: none;
}
.thanks__phone:hover { color: var(--mse-green); }
.thanks__phone svg { width: 19px; height: 19px; color: var(--mse-green); }

/* ------------------------------------------------- 22. Zonder JavaScript */

/* Zonder JS blijven beide stappen zichtbaar onder elkaar. */
.js .step2[hidden] { display: none; }
/* Zonder JavaScript staan beide stappen onder elkaar. De voortgangsbalk, de
   samenvatting, de terugknop en de doorgaan-knop hebben dan geen betekenis. */
.nojs .prog,
.nojs .recap,
.nojs .nextbtn,
.nojs .fcard__nav { display: none; }

.nojs .step2 { display: block !important; }
.nojs .step2__title { display: block; }

/* De vaste balk verschijnt zonder JavaScript nooit, dus hoort hij ook niet in
   de tabvolgorde. */
.nojs .sticky { display: none; }

/* Melding die alleen verschijnt als JavaScript uitstaat. */
.nojs-note {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--mse-accent);
  border-left-width: 4px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(236, 100, 70, .06);
  font-size: 14px;
  line-height: 1.55;
}
.nojs-note p { margin-bottom: 6px; }
.nojs-note ul { margin: 0; display: grid; gap: 3px; font-weight: 700; }

.step2__title {
  display: none;
  margin: 24px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--mse-line);
  font-size: 15px;
}

.fcard__nav { display: none; }
.fcard__nav.is-on { display: block; }

/* Doorgaan-knop van stap 1. Wordt door JavaScript toegevoegd, zodat de
   pagina zonder JavaScript onveranderd blijft. */
.nextbtn { margin-top: 22px; }
.nextbtn[disabled] { opacity: .45; }

.backbtn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  background: none; border: 0; padding: 6px 2px;
  font-family: var(--ff); font-size: 14px; font-weight: 700;
  color: var(--mse-ink-soft); cursor: pointer; border-radius: 4px;
}
.backbtn:hover { color: var(--mse-accent-text); }
.backbtn svg { width: 6px; height: 11px; transform: rotate(180deg); }

@media print {
  .sticky, .cookie, .reviewbar { display: none !important; }
}