/* Mikromedia, look 2027: twee materialen.

   Dit is de tweede stylesheet van deze site, op de branch look-2027. De
   eerste (main) is een lichte pagina met donkere leestekens. Deze draait dat
   om en maakt er twee materialen van, en dat is het hele idee:

     glas    de diepe grond met teal licht: kop, hero, wat wij beheren, het
             uitgelichte werk, de voet. Dat is de techniek.
     papier  het tundravlak met diepe inkt: hoe wij werken, de vragen, de
             foto. Dat zijn de mensen.

   De twee streepjes uit de huisstijl (tundra en teal) benoemen precies die
   twee materialen; hier zijn ze niet langer een versiering boven een kop
   maar de reden waarom de pagina eruitziet zoals hij eruitziet.

   Eén ding mag opvallen: de hero, met een foto op volle breedte en een kop
   op displaymaat. Al het andere is rustig en doet wat het moet doen.

   Kleuren komen uit tokens.css. Wat hier wel staat zijn rollen, geen
   kleuren: waar een materiaal ligt, hangt niet van de themastand af. */

:root {
  /* Lopende tekst op glas: 9,76:1 op --mm-deep. Niet --mm-soft, dat is zo
     wit dat elke bijzin als kop leest. */
  --tekst-op-donker: #93CBC6;
  /* Lopende tekst op papier: 7,51:1 op --shared-tundrasoft. */
  --tekst-op-tundra: #374A4F;

  --glas:      var(--mm-deep);
  --glas-2:    var(--mm-deep2);
  --glas-lijn: rgb(255 255 255 / .12);
  --papier:      var(--shared-tundrasoft);
  --papier-inkt: var(--mm-deep);
  --papier-lijn: rgb(7 27 34 / .16);
  --fotovel: #FFFFFF;

  /* De rollen die main ook kent, zodat de componenten die van daar komen
     (bewijs, uitgelicht, formulier) ongewijzigd werken. */
  --vlak-diep: var(--glas);
  --vlak-rand: transparent;
  --vlak-kaart: var(--mm-deep);
  --vlak-kaart-in: var(--mm-deep2);
  --vlak-kaart-rand: var(--mm-deep2);
  --rand-op-donker: #1C4A4E;

  /* Maat. Eén displaymaat voor de hero, één sectiemaat voor de afstand tussen
     de materialen. Groot, want de materialen moeten als vlakken lezen en
     niet als banden. */
  --display: clamp(2.6rem, 1.1rem + 5.2vw, 5.5rem);
  --kop-groot: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  --sectie: clamp(4rem, 7vw, 7.5rem);
  --wrap: 76rem;
}
:root[data-theme="dark"] {
  --vlak-diep: var(--color-surface-sunken);
  --vlak-rand: rgb(255 255 255 / .08);
  --vlak-kaart: var(--color-surface-raised);
  --vlak-kaart-in: var(--color-surface-raised);
  --vlak-kaart-rand: rgb(255 255 255 / .12);
  /* In de donkere stand is de pagina zelf al glas; het glas van de secties
     gaat dan een laag dieper zodat de naad zichtbaar blijft. */
  --glas: var(--color-surface-sunken);
  --glas-lijn: rgb(255 255 255 / .10);
  color-scheme: dark;
}

@font-face { font-family: Inter; src: url(/assets/fonts/Inter-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-600.woff2) format("woff2");
             font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  /* 17 px en niet 16: de kolommen zijn hier breder en de secties hoger, en
     dan is 16 net te fijn voor de lucht eromheen. */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); text-underline-offset: .18em; }
@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}
.wrap { width: min(100% - var(--space-8), var(--wrap)); margin-inline: auto; }

/* toetsenbordgebruikers eerst */
.skip {
  position: absolute; left: -9999px;
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-3) var(--space-4); z-index: 10;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* voortgangsbalk: drie pixels teal tegen de bovenrand, zonder overgang,
   want die zou achter de vinger aan lopen. */
.voortgang { position: fixed; inset: 0 0 auto; height: 3px; z-index: 30;
             background: rgb(255 255 255 / .12); }
.voortgang-vulling { height: 100%; background: var(--mm-teal);
                     transform: scaleX(var(--voortgang, 0)); transform-origin: left center; }

/* ---------------------------------------------------------------
   Typografie. Inter, één familie, twee gewichten. De maat doet het werk:
   de hero op displaymaat, sectiekoppen groot, de rest rustig.
   --------------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; margin: 0 0 var(--space-3); font-weight: 600; }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: -0.02em; }
h2 { font-size: var(--kop-groot); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
p  { margin: 0 0 var(--space-4); }
.lead { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5;
        color: var(--color-text-muted); }
/* Geen kapitalen meer boven een kop. Het label zegt waar je bent, en dat kan
   in gewone zinsopmaak, in teal op glas en petrol op de rest. */
.eyebrow { font-size: 1rem; font-weight: 600; color: var(--color-text-accent);
           margin: 0 0 var(--space-4); letter-spacing: 0; text-transform: none; }

/* Het merkteken boven een sectiekop: tundra en teal, de twee materialen naast
   elkaar. Eén definitie; welke twee tinten hangt af van het materiaal
   eronder en staat als --ritme op dat vlak. Op wit tundra en petrol, want teal
   haalt op wit 1,99 en verdwijnt. */
:root { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-petrol) 50% 100%); }
.sectiekop::before, .faq h2::before, .cta h2::before, .formulier-hoofd h2::before,
.hero-in::before {
  content: ""; display: block; width: 4.5rem; height: 4px;
  border-radius: var(--radius-full); margin-bottom: var(--space-5);
  background: var(--ritme);
}

/* Nederlandse en Duitse samenstellingen worden lang; zonder afbreking
   blijft er op een telefoon een halve regel leeg. */
.prose p, .prose li, .lead, .blok p, .faq .antwoord,
.geruststelling span, .blok-punten li { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3, .bewijs-regels, .bewijs-paren, .product-regels { hyphens: manual; }
.nobreak { hyphens: manual; -webkit-hyphens: manual; white-space: nowrap; }

/* ---------------------------------------------------------------
   De kop. Glas, altijd. Het witte logo, lichte links, en boven een foto
   wordt hij doorzichtig en ligt hij over de foto heen.
   --------------------------------------------------------------- */
.kop { background: var(--glas); color: var(--mm-soft);
       border-bottom: 1px solid var(--glas-lijn); position: relative; z-index: 5;
       --color-focus-ring: var(--mm-teal); }
.kop-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-6); padding-block: var(--space-5); }
.merk { flex: 0 0 auto; }
/* 60 px: op glas leest de pay-off in het witte logo op 6,4 px kaphoogte, net
   boven de grens die het handboek stelt. */
.merk img { height: 60px; width: auto; }
.merk-licht { display: none; }
.merk-donker { display: block; }
body:has(.hero-foto) .kop {
  position: absolute; inset: 0 0 auto; border-bottom: 0;
  /* Gemeten en niet geschat, met de menutekst verborgen en de grond van de
     kop intact, op het 95e percentiel van wat er achter de letters ligt: dit
     verloop haalt op alle zeven fotopagina's minstens 5,6:1 (/web, met het
     lichte glasvezelpaneel in beeld) en elders 8,8 tot 14,1. Zwaarder is
     dus niet nodig; de foto blijft zichtbaar tot in de kop. */
  background: linear-gradient(to bottom, rgb(7 27 34 / .6), rgb(7 27 34 / 0));
}

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav ul { order: 1; display: flex; align-items: center; gap: var(--space-6);
          list-style: none; margin: 0; padding: 0; }
.nav-thema { order: 2; display: flex; align-items: center;
             padding-left: var(--space-4); border-left: 1px solid var(--glas-lijn); }
.nav-thema:has(> .thema[hidden]) { display: none; }
.nav ul > li > a:not(.knop) {
  color: var(--mm-soft); text-decoration: none;
  /* Nooit over twee regels: "Over ons" brak op een smalle laptop af, en dan
     stond de knop half buiten beeld. Past het menu niet meer, dan klapt het
     dicht; zie het breekpunt onderaan. */
  display: inline-block; padding-block: var(--space-1); white-space: nowrap;
  transition: text-decoration-color var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) {
  .nav ul > li > a:not(.knop):hover {
    text-decoration: underline; text-underline-offset: 8px;
    text-decoration-color: rgb(255 255 255 / .45);
  }
}
.nav ul > li > a:not(.knop)[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 8px;
  text-decoration-thickness: 2px; text-decoration-color: var(--mm-teal);
}

.thema {
  flex: 0 0 auto; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; padding: 0; cursor: pointer;
  color: var(--tekst-op-donker); background: transparent; border: 0;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .thema:hover { background: rgb(255 255 255 / .08); color: var(--mm-soft); }
}
.thema-tekst { position: absolute; width: 1px; height: 1px; margin: -1px;
               padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.thema .thema-zon, .thema .thema-maan { display: none; }
.thema .thema-maan { display: block; }
:root[data-theme="dark"] .thema .thema-maan { display: none; }
:root[data-theme="dark"] .thema .thema-zon { display: block; }

.nav-schakel { display: none; position: absolute; width: 1px; height: 1px; margin: -1px;
               padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-knop { display: none; }
.nav-tekst-dicht { display: none; }

/* ---------------------------------------------------------------
   Knoppen. Petrol met wit, en op glas bij hover naar teal met diepe
   letters, want donkerder dan glas is een gat.
   --------------------------------------------------------------- */
.knop { display: inline-block; padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-md); text-decoration: none;
        font-weight: 600; font-size: 1rem; white-space: nowrap;
        transition: background-color var(--motion-fast) var(--motion-ease),
                    border-color var(--motion-fast) var(--motion-ease),
                    color var(--motion-fast) var(--motion-ease),
                    transform var(--motion-fast) var(--motion-ease); }
.knop:active { transform: scale(.97); }
.thema:active, .nav-knop:active { transform: scale(.94); }
button.knop { border: 0; font-family: inherit; cursor: pointer; }
.knop-primair { background: var(--button-primary-bg); color: var(--button-primary-fg); }
@media (hover: hover) {
  .knop-primair:hover { background: var(--button-primary-bg-hover);
                        color: var(--knop-primair-fg-hover, var(--button-primary-fg)); }
}
.knop-primair:active { background: var(--button-primary-bg-active);
                       color: var(--knop-primair-fg-hover, var(--button-primary-fg)); }
.knop-primair:disabled { background: var(--button-primary-bg-disabled);
                         color: var(--button-primary-fg-disabled); cursor: default; }
.knop-stil { background: var(--button-quiet-bg); color: var(--button-quiet-fg);
             border: 1px solid var(--button-quiet-border); }
@media (hover: hover) { .knop-stil:hover { background: var(--button-quiet-bg-hover); } }
.knop-stil:active { border-color: var(--color-text-muted); }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Op glas draaien de knoppen om: hover naar teal met diepe letters (7,17),
   de stille knop als lijn in wit, en de focusring teal. Eén lijst met alle
   glasvlakken, zodat ze niet uit elkaar lopen. */
.kop, .hero-donker, .hero-foto, .blokken, .vlak-donker, .voet, .case-uitgelicht, .bewijs {
  --color-focus-ring: var(--mm-teal);
  --button-primary-bg-hover: var(--mm-teal);
  --button-primary-bg-active: var(--mm-teal);
  --knop-primair-fg-hover: var(--mm-deep);
}
:root[data-theme="dark"] { --knop-primair-fg-hover: var(--mm-deep); }
.hero-donker .knop-stil, .hero-foto .knop-stil, .cta .knop-stil {
  background: transparent; color: var(--mm-soft); border-color: rgb(255 255 255 / .45);
}
@media (hover: hover) {
  .hero-donker .knop-stil:hover, .hero-foto .knop-stil:hover { background: rgb(255 255 255 / .1); }
}

/* ---------------------------------------------------------------
   De hero. Het ene ding dat mag opvallen.

   Met foto: de foto op volle breedte, de tekst onderin, een verloop naar de
   diepe grond zodat de kop leesbaar blijft wat er ook op de foto staat. De
   kop ligt eroverheen. Zonder foto: glas met het embleem als bouwkundig
   element, groter dan het vlak zodat je het nooit helemaal ziet.
   --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden;
        background: var(--glas); color: var(--mm-soft);
        padding-block: var(--sectie); }
.hero-in { position: relative; z-index: 1; }
.hero-in::before { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-teal) 50% 100%); }
/* Op een foto is teal geen tekstkleur: waar de lucht licht is valt het weg.
   Daar dus wit, iets gedempt; op glas zonder foto blijft het teal. */
.hero .eyebrow { color: var(--mm-teal); }
.hero-foto .eyebrow { color: var(--mm-soft); }
.hero h1 { font-size: var(--display); line-height: 1.02; letter-spacing: -0.03em;
           max-width: 15ch; margin-bottom: var(--space-6); }
.hero .lead { color: var(--mm-soft); opacity: .9; max-width: 44ch; margin-bottom: var(--space-8); }
.hero .acties { gap: var(--space-4); }

.hero-foto { min-height: min(92vh, 62rem); display: grid; align-items: end;
             padding-top: calc(var(--sectie) + 5rem); padding-bottom: var(--sectie); }
.hero-beeld { position: absolute; inset: 0; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Onderaan diep, bovenaan bijna niets: de foto blijft foto waar de tekst
   niet staat. Het diepe deel is ruim, want een kop van vijf regels op een
   telefoon vraagt meer grond dan een kop van twee. */
/* Bovenin .38 en niet .18: het label boven de kop op /beveiliging lag tegen
   een lichte plek in de foto en haalde 3,7:1; op .38 is dat 4,8. Ook dit is
   gemeten met de tekst verborgen. */
.hero-beeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgb(7 27 34 / .97) 0%, rgb(7 27 34 / .86) 36%, rgb(7 27 34 / .55) 66%, rgb(7 27 34 / .38) 100%);
}

/* Zonder foto: het embleem als vorm die het vlak draagt. */
.hero { --em-grootte: min(64vw, 42rem); --em-rechts: -15%; }
.hero-embleem { position: absolute; right: var(--em-rechts); top: 50%;
                transform: translateY(-50%); width: var(--em-grootte); height: auto;
                opacity: .14; pointer-events: none; }
.hero-eenvoudig { padding-block: calc(var(--sectie) * .7); }
.hero-eenvoudig h1 { font-size: var(--kop-groot); max-width: 24ch; }
.hero-eenvoudig + .wrap .prose { padding-top: var(--space-8); }
/* Een lichte hero komt in dit ontwerp niet voor; wie er een vraagt krijgt
   glas. Het materiaal is een besluit van de site, niet van de pagina. */

/* De ene georkestreerde beweging op de site: bij het laden zakt de foto op
   zijn plaats en komt de tekst op. Zevenhonderd milliseconden, ease-out,
   alleen dekking en schaal. Onder reduced-motion zet de regel onderaan dit
   bestand elke animatie op een milliseconde, dus dan staat alles er direct. */
@keyframes hero-foto-in { from { transform: scale(1.05); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes hero-tekst-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-foto .hero-beeld img { animation: hero-foto-in 1.3s var(--motion-ease) both; }
.hero-foto .hero-in > * { animation: hero-tekst-in .7s var(--motion-ease) both; }
.hero-foto .hero-in > :nth-child(2) { animation-delay: 80ms; }
.hero-foto .hero-in > :nth-child(3) { animation-delay: 160ms; }
.hero-foto .hero-in > :nth-child(4) { animation-delay: 240ms; }

/* ---------------------------------------------------------------
   Lopende tekst. Smal, links uitgelijnd, met lucht.
   --------------------------------------------------------------- */
.prose { padding-block: var(--sectie); max-width: 42rem; }
.prose h2 { margin-top: var(--space-10); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.prose > h2:first-child, .prose > :first-child { margin-top: 0; }
.prose p { font-size: 1.0625rem; line-height: 1.65; }
.prose ol, .prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose-kop { margin-bottom: var(--space-6); }
.prose img { max-width: 100%; height: auto; }
/* Een merk van een ander in lopende tekst: 64 px, uit de map en niet uit de
   content. Twee bestanden, een per ondergrond. */
img[src^="/assets/logos/"] { display: block; height: 64px; width: auto;
                             margin-block: var(--space-5) var(--space-6); }
img[src^="/assets/logos/"][src$="-wit.svg"] { display: none; }
:root[data-theme="dark"] img[src^="/assets/logos/"]:not([src$="-wit.svg"]) { display: none; }
:root[data-theme="dark"] img[src^="/assets/logos/"][src$="-wit.svg"] { display: block; }
.meta { color: var(--color-text-muted); font-size: var(--text-body-sm-size);
        display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Glas: wat wij beheren. Het register op de diepe grond, met een tealstreep
   op elke haarlijn. Geen kaarten; een lijn zegt al waar een ding eindigt.
   --------------------------------------------------------------- */
.blokken { background: var(--glas); color: var(--mm-soft);
           padding-block: var(--sectie); border-block: 1px solid var(--vlak-rand); }
.blokken .sectiekop { max-width: 22ch; }
.blokken .sectiekop::before { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-teal) 50% 100%); }
.raster { display: grid; column-gap: var(--space-8); row-gap: var(--space-10);
          margin-top: var(--space-10);
          /* 13rem en niet 17: op /netwerk staan er vijf naast elkaar, en op 17rem
             viel de vijfde alleen op een tweede rij. Op de volle wrap van 76rem
             met vier tussenruimtes van 2rem komt een kolom op 13,6rem uit; met
             vier blokken worden ze vanzelf breder. */
          grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.blok { position: relative; border-top: 1px solid var(--glas-lijn); padding-top: var(--space-6); }
.blok::before { content: ""; position: absolute; left: 0; top: -1px;
                width: 2.25rem; height: 3px; border-radius: var(--radius-full);
                background: var(--mm-teal); }
.blok h3 { font-size: 1.375rem; line-height: 1.2; color: var(--mm-soft); letter-spacing: -0.01em; }
.blok-claim { font-weight: 600; color: var(--mm-soft); margin: var(--space-2) 0 0; }
.blok p { color: var(--tekst-op-donker); margin: var(--space-2) 0 0; }
.blok-logo { display: block; height: 76px; width: auto; max-width: 100%; margin-bottom: var(--space-4); }
/* Een logo dat een link is: geen onderstreping (er is geen tekst), wel de
   focusring en het indrukken zoals elk drukvlak. De marge verhuist naar de
   link zodat de ring strak om het logo staat. */
.blok-logo-link { display: inline-block; margin-bottom: var(--space-4); line-height: 0;
                  border-radius: var(--radius-sm);
                  transition: transform var(--motion-fast) var(--motion-ease); }
.blok-logo-link .blok-logo { margin-bottom: 0; }
.blok-logo-link:active { transform: scale(.97); }
.blok h3 a { color: inherit; }
@media (max-width: 30rem) { .blok-logo { height: auto; width: min(100%, 280px); } }
.blok-punten { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.blok-punten li { position: relative; padding-left: var(--space-5);
                  color: var(--tekst-op-donker); font-size: var(--text-body-sm-size); line-height: 1.6; }
.blok-punten li::before { content: ""; position: absolute; left: 0; top: .62em;
                          width: var(--space-3); height: 2px; border-radius: var(--radius-full);
                          background: var(--mm-teal); }
.vlak-donker { background: var(--glas); color: var(--mm-soft); }
.vlak-donker .eyebrow, .hero-donker:not(.hero-foto) .eyebrow, .voet .eyebrow,
.case-uitgelicht .eyebrow { color: var(--mm-teal); }

/* ---------------------------------------------------------------
   Papier: hoe wij werken, de vragen, de foto. Het tundravlak, met de diepe
   inkt en petrol als actie.
   --------------------------------------------------------------- */
.stappen, .faq, .beeld, .cases { background: var(--papier); color: var(--papier-inkt); }
.stappen, .faq, .cases { padding-block: var(--sectie); }
.stappen .sectiekop::before, .faq h2::before, .cases .sectiekop::before {
  --ritme: linear-gradient(to right, var(--mm-deep) 0 50%, var(--mm-petrol) 50% 100%);
}
/* De stappen als route. Het is een volgorde in de tijd, dus de nummers
   staan op een lijn en de lijn loopt door de nummers heen: vijf op een rij
   waar dat past, daaronder als kolom met de lijn verticaal. De ring om elk
   nummer heeft de kleur van het papier, zodat de lijn achter het nummer
   langs lijkt te gaan. */
.stappenlijst { list-style: none; margin: var(--space-10) 0 0; padding: 0;
                display: grid; gap: var(--space-8) var(--space-6);
                grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
                position: relative; }
.stappenlijst li { display: flex; flex-direction: column; gap: var(--space-4);
                   align-items: flex-start; position: relative; }
.stapnummer { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
              background: var(--mm-petrol); color: #fff; display: grid; place-items: center;
              font-weight: 600; font-size: var(--text-body-sm-size);
              box-shadow: 0 0 0 6px var(--papier); position: relative; z-index: 1; }
/* De lijn: van nummer tot nummer, dus niet vanaf de linkerrand en niet tot
   de rechterrand. Op een brede rij horizontaal op de hoogte van het midden
   van de nummers; als kolom verticaal door de nummers heen. */
/* Per stap een segment tot het volgende nummer, en geen segment na het
   laatste: een lijn die na vijf doorloopt tot de rand belooft een zesde. */
@media (min-width: 64rem) {
  .stappenlijst li:not(:last-child)::before { content: ""; position: absolute;
    left: 2.25rem; right: calc(-1 * var(--space-6)); top: calc(1.125rem - 1px); height: 2px;
    background: var(--papier-lijn); }
}
@media (max-width: 64rem) {
  .stappenlijst { grid-template-columns: 1fr; gap: var(--space-6); }
  .stappenlijst li { flex-direction: row; gap: var(--space-4); }
  .stappenlijst li:not(:last-child)::before { content: ""; position: absolute;
    left: calc(1.125rem - 1px); top: 2.25rem; bottom: calc(-1 * var(--space-6)); width: 2px;
    background: var(--papier-lijn); }
}
.stappenlijst h3 { font-size: 1.25rem; margin-bottom: var(--space-1); color: var(--papier-inkt); }
.stappenlijst p { color: var(--tekst-op-tundra); margin: 0; }
/* Het embleem ook in het papier, als tekening en niet als logo: dezelfde
   vorm die in de hero door het glas snijdt, hier in petrol op laag vermogen,
   rechtsonder uit het vlak. Zo is een papieren sectie geen leeg vel. */
.stappen { position: relative; overflow: hidden; }
.stappen::after { content: ""; position: absolute; right: -8%; bottom: -46%;
                  width: min(44vw, 30rem); aspect-ratio: 1;
                  background: url(/assets/mikromedia-beeldmerk-petrol.svg) center / contain no-repeat;
                  opacity: .07; pointer-events: none; }
.stappen .wrap { position: relative; z-index: 1; }
/* Twee papieren secties achter elkaar, zoals op /werkwijze: een haarlijn op
   de naad en minder lucht, anders wordt het één vel van een meter. */
.stappen + .faq { border-top: 1px solid var(--papier-lijn); padding-top: calc(var(--sectie) * .7); }
.stappen:has(+ .faq) { padding-bottom: calc(var(--sectie) * .7); }

/* De vragen: kop links, vragen rechts, zodat de lijst leest als een gesprek
   en niet als een accordeon in een kader. Het kader van main is weg; het
   papier is nu zelf het vlak. */
.faq { border: 0; }
.faq .wrap, .faq-tundra .wrap {
  background: transparent; padding: 0; border-radius: 0;
  width: min(100% - var(--space-8), var(--wrap));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--space-12); align-items: start;
}
.faq h2, .faq-tundra h2 { grid-column: 1; grid-row: 1; color: var(--papier-inkt); max-width: 12ch; }
.faq details { grid-column: 2; border-bottom: 1px solid var(--papier-lijn); padding-block: var(--space-5); }
.faq details:first-of-type { border-top: 1px solid var(--papier-lijn); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.25rem; line-height: 1.3;
               list-style: none; display: flex; justify-content: space-between;
               align-items: baseline; gap: var(--space-6); color: var(--papier-inkt); }
.faq summary::-webkit-details-marker { display: none; }
/* Het teken is altijd een plus; bij openen draait hij een achtste slag. */
.faq summary::after { content: "+"; color: var(--mm-petrol); flex: 0 0 auto; font-weight: 400;
                      line-height: 1; transition: transform var(--motion-fast) var(--motion-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .antwoord { color: var(--tekst-op-tundra); max-width: 60ch; padding-top: var(--space-3); }
.faq a { color: var(--papier-inkt); text-decoration-thickness: 2px; }
@media (hover: hover) {
  .faq summary:hover .faq-vraag { text-decoration: underline; text-underline-offset: 6px; }
}
@supports selector(details::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden;
    transition: block-size var(--motion-base) var(--motion-ease),
                content-visibility var(--motion-base) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
summary:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring);
                        outline-offset: var(--focus-offset); }

/* Eén foto op de site, op papier, als een afdruk op een vel. */
.beeld { padding-block: var(--sectie); }
.beeld figure { margin: 0; max-width: 68ch; background: var(--fotovel);
                padding: var(--space-6); border-radius: var(--radius-sm); }
.beeld img { display: block; width: 100%; height: auto; }
.beeld figcaption { margin-top: var(--space-4); font-size: var(--text-body-sm-size);
                    color: var(--tekst-op-tundra); }

/* ---------------------------------------------------------------
   De vraag om contact: petrol, het actiemateriaal, één keer per pagina.
   --------------------------------------------------------------- */
.cta { background: var(--mm-petrol); color: #fff; padding-block: var(--sectie); border: 0;
       --color-focus-ring: var(--mm-deep); }
.cta-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-10); flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: var(--space-2); max-width: 20ch; }
.cta h2::before { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-soft) 50% 100%); }
.cta p { margin: 0; color: rgb(255 255 255 / .86); max-width: 48ch; }
/* Wit op petrol is de tekst; de knop keert dus om: licht vlak, diepe letters. */
.cta .knop-primair { background: var(--mm-soft); color: var(--mm-deep); }
@media (hover: hover) { .cta .knop-primair:hover { background: #fff; color: var(--mm-deep); } }
.cta .knop-primair:active { background: #fff; color: var(--mm-deep); }

/* ---------------------------------------------------------------
   Formulier. Op de paginagrond, twee kolommen: links het formulier, rechts
   wat gerust moet stellen.
   --------------------------------------------------------------- */
.formulier { padding-block: var(--sectie); border-top: 1px solid var(--color-border); }
.formulier form { max-width: 34rem; }
.veld { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.veld label { font-weight: 600; font-size: var(--text-body-sm-size); }
.veld .optioneel { font-weight: 400; color: var(--color-text-muted); }
.veld input, .veld textarea {
  font: inherit; color: var(--color-text); background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: var(--space-3);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .veld input:hover, .veld textarea:hover { border-color: var(--input-border-hover); }
}
/* Twee pixels rand bij een fout, maar als binnenschaduw: dan verspringt er niets. */
.veld [aria-invalid="true"] { border-color: var(--input-border-error);
                              box-shadow: inset 0 0 0 1px var(--input-border-error); }
.veldfout { color: var(--color-feedback-danger-fg); font-size: var(--text-body-sm-size); }
.veld-uitleg, .veld-hint { font-size: var(--text-body-sm-size); color: var(--color-text-muted); max-width: 34rem; }
.veld-verplicht-uitleg { font-size: var(--text-caption-size); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.verplicht { color: var(--color-feedback-danger-fg); font-weight: 400; }
.form-belofte { font-weight: 600; margin-bottom: var(--space-4); }
.melding { padding: var(--space-4); border-radius: var(--radius-md); max-width: 34rem; border: 1px solid; }
.melding-goed { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg);
                border-color: var(--color-feedback-success-fg); }
.melding-fout { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg);
                border-color: var(--color-feedback-danger-fg); }
.melding ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.melding p { margin: 0; }
.formulier-in { display: grid; gap: var(--space-12);
                grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
.formulier-hoofd { grid-column: 1; grid-row: 1 / span 2; }
.formulier-naast { grid-column: 2; grid-row: 1; }
.formulier-onder { grid-column: 2; grid-row: 2; }
.formulier-onder > :first-child { margin-top: 0; }
.formulier-hoofd form { max-width: 34rem; }
.formulier-naast > h2 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); margin-bottom: var(--space-5); }
.geruststelling { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-5); }
.geruststelling li { display: grid; gap: var(--space-1); position: relative; padding-left: var(--space-5); }
.geruststelling li::before { content: ""; position: absolute; left: 0; top: .58em;
                             width: var(--space-3); height: 2px; border-radius: var(--radius-full);
                             background: var(--mm-petrol); }
.geruststelling strong { font-size: var(--text-body-size); }
.geruststelling span { color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.gerust-vlak { background: var(--papier); color: var(--papier-inkt); border-radius: var(--radius-md); padding: var(--space-6); }
.gerust-vlak h3 { font-size: var(--text-h4-size); margin-bottom: var(--space-2); color: var(--papier-inkt); }
.gerust-vlak p { margin: 0; color: var(--tekst-op-tundra); font-size: var(--text-body-sm-size); line-height: 1.7; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 60rem) {
  .formulier-in { grid-template-columns: 1fr; gap: var(--space-8); }
  .formulier-hoofd, .formulier-naast, .formulier-onder { grid-column: auto; grid-row: auto; }
}

/* ---------------------------------------------------------------
   Domeincheck. Direct onder de hero, op de paginagrond.
   --------------------------------------------------------------- */
.domeincheck { margin-block: var(--space-12) var(--space-4); }
.domeincheck-herkomst { font-size: var(--text-body-lg-size); margin-bottom: var(--space-5); }
.domeincheck-form label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.domeincheck-rij { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.domeincheck-rij input { flex: 1 1 18rem; min-width: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--input-border); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--input-fg); font-family: inherit; font-size: 1.0625rem;
  transition: border-color var(--motion-fast) var(--motion-ease); }
.domeincheck-rij input::placeholder { color: var(--input-placeholder); }
@media (hover: hover) and (pointer: fine) {
  .domeincheck-rij input:hover { border-color: var(--input-border-hover); }
}
.domeincheck-rij button { border: 0; cursor: pointer; font-family: inherit; }
.domeincheck-hint { margin-top: var(--space-2); font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.domeincheck-uitslag:empty { display: none; }
.domeincheck-bezig { margin-top: var(--space-5); color: var(--color-text-muted); }
.domeincheck-kaart { margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
                     border-left: 3px solid var(--color-border-strong); background: var(--color-surface-raised); }
.domeincheck-kaart.is-nieuw, .domeincheck-suggesties.is-nieuw { transition: opacity var(--motion-base) var(--motion-ease); }
@starting-style { .domeincheck-kaart.is-nieuw, .domeincheck-suggesties.is-nieuw { opacity: 0; } }
.domeincheck-kaart h3 { margin: 0 0 var(--space-2); }
.domeincheck-kaart p { margin: 0; }
.domeincheck-kaart.is-vrij { border-left-color: var(--color-feedback-success-fg);
  background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); }
.domeincheck-kaart.is-bezet { border-left-color: var(--color-feedback-info-fg);
  background: var(--color-feedback-info-bg); color: var(--color-feedback-info-fg); }
.domeincheck-kaart.is-fout { border-left-color: var(--color-feedback-warning-fg);
  background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-fg); }
.domeincheck-actie { margin-top: var(--space-4) !important;
  /* Flex met een gap: de twee knoppen staan als inline-elementen tegen
     elkaar aan, en op een smal scherm moeten ze ook onder elkaar ruimte
     houden als de tweede naar een nieuwe regel loopt. */
  display: flex; flex-wrap: wrap; gap: var(--space-3); }
.domeincheck-actie .knop { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.domeincheck-suggesties { margin-top: var(--space-6); }
.domeincheck-suggesties h3 { font-size: var(--text-h4-size); line-height: var(--text-h4-line); margin: 0 0 var(--space-1); }
.domeincheck-suggesties p { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.domeincheck-suggesties ul { list-style: none; margin: 0; padding: 0;
                             display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.domeincheck-suggesties li a { display: inline-block; padding-block: 5px; }

/* De DMARC-check: dezelfde invoerregel en kaart als de domeincheck, met
   daaronder een kaart per onderdeel. De status staat alleen in het label
   rechtsboven, in woorden en in kleur; de kaart zelf blijft neutraal, want
   vier gekleurde blokken onder elkaar lezen niet en het oordeel erboven
   draagt de kleur al. */
.mailcheck-uitslag { margin-top: var(--space-6); }
.mailcheck-oordeel { margin-top: 0; }
.mailcheck-oordeel h2 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); margin: 0 0 var(--space-2); }
.domeincheck-kaart.is-goed { border-left-color: var(--color-feedback-success-fg);
  background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); }
.domeincheck-kaart.is-let-op { border-left-color: var(--color-feedback-warning-fg);
  background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-fg); }
.mailcheck-oordeel.is-fout { border-left-color: var(--color-feedback-danger-fg);
  background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); }
.mailcheck-lijst { list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.mailcheck-onderdeel { padding: var(--space-4) var(--space-5); background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; }
.mailcheck-onderdeel h3 { font-size: var(--text-h4-size); line-height: var(--text-h4-line); margin: 0 0 var(--space-2); }
.mailcheck-onderdeel p { margin: 0; }
.mailcheck-label { display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-body-sm-size); font-weight: 600; margin-bottom: var(--space-2) !important; }
.mailcheck-teken { color: var(--color-text-muted); }
.mailcheck-onderdeel.is-goed .mailcheck-teken { color: var(--color-feedback-success-fg); }
.mailcheck-onderdeel.is-let-op .mailcheck-teken { color: var(--color-feedback-warning-fg); }
.mailcheck-onderdeel.is-fout .mailcheck-teken { color: var(--color-feedback-danger-fg); }
/* Records zijn lang en zonder spaties op de plekken waar je wilt afbreken;
   afbreken waar het moet houdt de kaart binnen het scherm. */
.mailcheck-record { margin: var(--space-3) 0 0; padding: var(--space-3); overflow-wrap: anywhere;
  white-space: pre-wrap; font-family: var(--font-family-mono); font-size: var(--text-caption-size);
  background: var(--color-surface); }
.mailcheck-vervolg { margin-top: var(--space-8); max-width: 34rem; }
.mailcheck-vervolg h2 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); margin: 0 0 var(--space-2); }
.mailcheck-vervolg > p { margin: 0 0 var(--space-5); }

/* ---------------------------------------------------------------
   Bewijs en het uitgelichte werk: glas, met de logblokken als kaarten in
   het glas. Technisch en niet decoratief.
   --------------------------------------------------------------- */
.bewijs { background: var(--glas); color: var(--mm-soft); padding-block: var(--sectie); }
.bewijs .sectiekop::before { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-teal) 50% 100%); }
.bewijs-raster { display: grid; gap: var(--space-6); margin-top: var(--space-10);
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.bewijs-blok { margin: 0; display: flex; flex-direction: column; background: var(--vlak-kaart-in);
               border: 1px solid var(--glas-lijn); border-radius: var(--radius-sm); overflow: hidden; }
.bewijs-kop { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
              padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgb(255 255 255 / .10); }
.bewijs-label { font-family: var(--font-family-mono); font-size: var(--text-caption-size);
                letter-spacing: .06em; color: var(--mm-teal); }
.bewijs-titel { font-size: var(--text-body-sm-size); color: var(--mm-soft); font-weight: 600; }
.bewijs-regels { list-style: none; margin: 0; padding: var(--space-4);
                 display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-4);
                 font-family: var(--font-family-mono); font-size: var(--text-caption-size);
                 line-height: 1.85; color: var(--tekst-op-donker); overflow-x: auto;
                 scrollbar-width: thin; scrollbar-color: var(--mm-teal) transparent; }
.bewijs-regels li { display: contents; }
.bewijs-regels .bewijs-tekst:only-child { grid-column: 1 / -1; }
.bewijs-paren { margin: 0; padding: var(--space-4); font-family: var(--font-family-mono);
                font-size: var(--text-caption-size); line-height: 1.85; }
.bewijs-paren > div { display: flex; align-items: baseline; gap: var(--space-3); }
.bewijs-paren dt { color: var(--tekst-op-donker); flex: 0 0 auto; white-space: nowrap; }
.bewijs-paren dd { margin: 0; color: var(--mm-soft); font-weight: 600; font-variant-numeric: tabular-nums;
                   flex: 1 1 auto; text-align: right; }
.bewijs-tijd { white-space: nowrap; color: var(--mm-teal); font-variant-numeric: tabular-nums; }
.bewijs-uitleg, .bewijs-bron { margin: auto 0 0; padding: var(--space-3) var(--space-4);
                               font-size: var(--text-caption-size); color: var(--tekst-op-donker);
                               border-top: 1px solid rgb(255 255 255 / .08); }

.case-uitgelicht { background: var(--glas); color: var(--mm-soft); padding-block: var(--sectie);
                   border-block: 1px solid var(--vlak-rand); }
.case-uitgelicht-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .82fr);
                      gap: var(--space-12); align-items: center; }
.case-uitgelicht h2 { max-width: 18ch; }
.case-uitgelicht-tekst > p:not(.eyebrow) { color: var(--tekst-op-donker); max-width: 54ch; }
.case-uitgelicht-link { display: inline-flex; align-items: center; gap: var(--space-2);
                        color: var(--mm-soft); font-weight: 600; text-underline-offset: 5px; }
.case-uitgelicht-link svg, .case-kaart-actie svg { width: 1.25rem; height: 1.25rem; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--motion-fast) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .case-uitgelicht-link:hover svg, .case-kaart:hover .case-kaart-actie svg { transform: translateX(var(--space-1)); }
}
.product-signaal { background: var(--vlak-kaart-in); border: 1px solid var(--glas-lijn);
                   border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-3); }
.product-signaal-kop, .product-bron { margin: 0; padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgb(255 255 255 / .08); font-size: var(--text-caption-size);
  color: var(--tekst-op-donker); opacity: .8; }
.product-signaal-kop { border-bottom: 1px solid rgb(255 255 255 / .10); font-weight: 600; border-top: 0; }
.alleen-voorlezen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.product-tijd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-tot { color: var(--tekst-op-donker); }
.product-status { color: var(--mm-teal); font-family: var(--font-family-mono);
                  font-size: var(--text-caption-size); letter-spacing: .06em; }
.product-regels { list-style: none; margin: 0; padding: var(--space-2) var(--space-5); }
.product-regels li { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-4);
                     padding-block: var(--space-4); border-bottom: 1px solid rgb(255 255 255 / .08); }
.product-regels time { color: var(--mm-teal); font-family: var(--font-family-mono); font-size: var(--text-body-sm-size); }
.product-regels span { color: var(--tekst-op-donker); }
.product-totaal { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
                  margin: 0; padding: var(--space-4) var(--space-5); background: rgb(255 255 255 / .04); }
.product-totaal span { color: var(--tekst-op-donker); }
.product-totaal strong { font-size: var(--text-h3-size); }

/* De cases op papier, als één brede kaart die in zijn geheel de link is. */
.cases-lijst { display: grid; gap: var(--space-5); margin-top: var(--space-10); }
.case-kaart { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-10);
              align-items: center; padding: var(--space-8); border: 1px solid var(--papier-lijn);
              border-radius: var(--radius-md); color: var(--papier-inkt); text-decoration: none;
              background: var(--fotovel);
              transition: border-color var(--motion-fast) var(--motion-ease),
                          box-shadow var(--motion-fast) var(--motion-ease),
                          transform var(--motion-fast) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .case-kaart:hover { border-color: var(--mm-petrol); box-shadow: var(--shadow-2); }
}
.case-kaart:active { transform: scale(.985); }
.case-kaart-inhoud { display: grid; }
.case-kaart .eyebrow { margin-bottom: var(--space-2); }
.case-kaart-titel { font-size: var(--text-h3-size); line-height: var(--text-h3-line); margin: 0 0 var(--space-2); }
.case-kaart-tekst { color: var(--tekst-op-tundra); max-width: 68ch; }
.case-kaart-punten { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
                     margin-top: var(--space-4); color: var(--tekst-op-tundra); font-size: var(--text-body-sm-size); }
.case-kaart-punten > span { position: relative; padding-left: var(--space-5); }
.case-kaart-punten > span::before { content: ""; position: absolute; left: 0; top: .72em;
                                    width: var(--space-3); height: 2px; background: var(--mm-petrol); }
.case-kaart-actie { display: inline-flex; align-items: center; gap: var(--space-2);
                    color: var(--mm-petrol); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------
   De voet: het laatste woord van de pagina is de plek.

   Boven de plek met het kaartje, dan contact als één regel naast het
   lidmaatschap, onderaan het merk met het menu en het juridische als rustige
   regels. Geen kolommen met koppen meer: de rangorde zit in de maat.
   --------------------------------------------------------------- */
.voet { background: var(--glas); color: var(--mm-soft);
        padding-block: var(--sectie) var(--space-6); position: relative; overflow: hidden;
        border-top: 1px solid var(--vlak-rand); }
.voet a { color: var(--mm-soft); }
.voet-plaats { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
               gap: var(--space-10) var(--space-12); align-items: center; }
.voet-plaats h2 { color: var(--mm-soft); max-width: 14ch; }
.voet-plaats .sectiekop::before { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-teal) 50% 100%); }
.voet-plaats p { color: var(--tekst-op-donker); max-width: 46ch; margin: 0; font-size: 1.0625rem; }
/* Het kaartje: de buurlanden in tundra, gedempt, het smalle stuk in teal,
   Susteren als lichte punt. Dezelfde twee tinten als de streepjes boven de
   kop, want het is hetzelfde teken op een andere maat. */
.voet-kaart { margin: 0; justify-self: end; width: min(100%, 30rem); }
.voet-kaart svg { width: 100%; height: auto; display: block; overflow: visible; }
.voet-kaart-buur { fill: var(--shared-tundra); opacity: .55; }
.voet-kaart-nl { fill: var(--mm-teal); }
.voet-kaart-punt { fill: var(--mm-soft); }
.voet-kaart-tekst { fill: var(--tekst-op-donker); font-family: var(--font-family); font-size: 14px; }
.voet-kaart-naam { fill: var(--mm-soft); font-weight: 600; }

/* De merkenband. Eén kleur, één maat, langzaam: 80 seconden voor een hele
   ronde, lineair, want een band die vertraagt en versnelt trekt de aandacht
   die hij juist niet moet trekken. Alleen transform, dus buiten de layout.
   De randen lopen uit in het glas, zodat er geen begin en geen eind is.
   Onder de aanwijzer staat hij stil, zodat een naam te lezen blijft. */
.voet-merken { margin-bottom: var(--space-12); }
.voet-merken-spoor { display: flex; gap: var(--space-12); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.voet-merken-band { list-style: none; margin: 0; padding: 0; flex: 0 0 auto;
                    display: flex; align-items: center; gap: var(--space-12);
                    white-space: nowrap;
                    animation: voet-merken 80s linear infinite; }
.voet-merken-band li { display: flex; align-items: center; }
/* Officiële witte varianten, iets gedempt zodat ze in de band even licht
   zijn als de tekst erboven en niet feller dan het eigen merk onderin. Geen
   filter: dat is het merk van een ander. De hoogte komt per logo uit de
   config, op optische maat. */
/* Drie klassen diep, want de regel voor logo's van derden in de lopende
   tekst (64 px, op de map assets/logos) pakt deze bestanden ook en weegt
   zwaarder dan een enkele klasse. */
.voet .voet-merken-band li img { display: block; height: var(--logo-h, 32px); width: auto;
                                 margin: 0; opacity: .82; }
@keyframes voet-merken { to { transform: translateX(calc(-100% - var(--space-12))); } }
@media (hover: hover) { .voet-merken-spoor:hover .voet-merken-band { animation-play-state: paused; } }
/* Wie beweging heeft uitgezet krijgt een stille rij die gewoon afbreekt, en
   geen tweede lijst. */
@media (prefers-reduced-motion: reduce) {
  .voet-merken-band { animation: none; flex-wrap: wrap; white-space: normal; gap: var(--space-5) var(--space-10); }
  .voet-merken-band[aria-hidden] { display: none; }
  .voet-merken-spoor { -webkit-mask-image: none; mask-image: none; }
}

.voet-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
                gap: var(--space-5) var(--space-8); margin-top: var(--space-12);
                padding-block: var(--space-6); border-block: 1px solid var(--glas-lijn); }
/* Op de basislijn, en het adres krijgt dezelfde ruimte als de links: anders
   staat de tekst zonder link een paar pixels hoger dan de twee ernaast. */
.voet-contact address { font-style: normal; display: flex; flex-wrap: wrap;
                        align-items: baseline; gap: var(--space-2) var(--space-6); }
.voet-contact address span, .voet-contact address a { display: inline-block; padding-block: 5px; }
.voet-leden { display: flex; gap: var(--space-6); align-items: center; list-style: none; margin: 0; padding: 0; }
.voet-leden li a { display: block; line-height: 0; transition: transform var(--motion-fast) var(--motion-ease); }
.voet-leden li a:active { transform: scale(.97); }
.voet img[src^="/assets/logos/"] { display: block; height: 56px; width: auto; margin: 0; }
/* Een keurmerk op de maat van het bestand: de badge van internet.nl is
   38 px hoog en heeft zijn eigen witte vlak, dus geen schaling naar 56. */
.voet img[src^="/assets/keurmerken/"] { display: block; height: 38px; width: auto; margin: 0; }

/* Het overzicht van alle pagina's: vijf kolommen op een breed scherm, en
   vanzelf minder naarmate het smaller wordt. De kop is de hub en weegt
   zwaarder dan de pagina's eronder; de links houden 5px lucht boven en
   onder, zodat ze op een telefoon groot genoeg zijn om te raken. */
.voet-overzicht { display: grid; gap: var(--space-8) var(--space-6); margin-top: var(--space-10);
                  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.voet-overzicht h2 { font-size: var(--text-body-size); line-height: var(--text-body-line); margin: 0 0 var(--space-2); }
.voet-overzicht h2 a { font-weight: 700; text-decoration: none; }
.voet-overzicht li a { display: inline-block; padding-block: 5px; text-decoration: none;
                       font-size: var(--text-body-sm-size); color: var(--tekst-op-donker); }
@media (hover: hover) {
  .voet-overzicht a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Het merk lijnt uit op de bovenste regel, het menu, en niet op het midden
   van drie regels van verschillende hoogte: dan hing het KvK-nummer er
   onder los bij. */
.voet-onder { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-12);
              align-items: start; margin-top: var(--space-8); }
.voet-merk { grid-row: 1 / span 2; }
.voet-merk img { width: 260px; height: auto; margin-top: 2px; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet-menu ul, .voet-juridisch, .voet-talen { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.voet-menu a { display: inline-block; padding-block: 5px; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .voet-menu a:hover { text-decoration: underline; text-underline-offset: 6px; } }
.voet [aria-current="page"] { opacity: .6; text-decoration: none; pointer-events: none; }
.voet-klein { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: baseline;
              font-size: var(--text-body-sm-size); color: var(--tekst-op-donker); }
.voet-klein a { color: var(--tekst-op-donker); display: inline-block; padding-block: 3px; }
/* De talen zijn een andere groep dan het juridische; een haarlijn zegt dat,
   zodat de grotere afstand ertussen geen toeval lijkt. */
.voet-talen { padding-left: var(--space-6); border-left: 1px solid var(--glas-lijn); }

/* ---------------------------------------------------------------
   Smal scherm. De kop klapt op 69rem dicht; de rest op 48rem.
   --------------------------------------------------------------- */
/* Zes menupunten, een knop en de themaschakelaar passen op volle afstand
   pas vanaf zo'n 1170 px. Daaronder eerst de afstanden kleiner, en pas als
   ook dat niet past klapt het menu dicht. Gemeten op 18 oktober 2026, toen
   Support erbij kwam; komt er een menupunt bij, meet dan opnieuw. */
@media (max-width: 74rem) {
  .nav, .nav ul { gap: var(--space-4); }
}
@media (max-width: 60rem) {
  .hero-embleem { --em: min(112vw, 28rem); right: calc(var(--em) / -2); width: var(--em); opacity: .10; }
  .voet-plaats { grid-template-columns: 1fr; }
  .voet-kaart { justify-self: start; }
  .case-uitgelicht-in { grid-template-columns: 1fr; gap: var(--space-8); }
  .faq .wrap, .faq-tundra .wrap { grid-template-columns: 1fr; }
  .faq h2, .faq-tundra h2 { grid-row: auto; max-width: none; margin-bottom: var(--space-6); }
  .faq details { grid-column: 1; }
}
@media (max-width: 69rem) {
  .kop-in { gap: var(--space-4); }
  .merk img { height: 46px; }
  .nav-schakel { display: block; }
  .nav-knop { display: inline-grid; place-items: center; position: relative; cursor: pointer;
              inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
              border: 1px solid rgb(255 255 255 / .3); border-radius: var(--radius-md);
              background: transparent; color: var(--mm-soft);
              transition: background-color var(--motion-fast) var(--motion-ease),
                          transform var(--motion-fast) var(--motion-ease); }
  .nav-knop .nav-tekst-open, .nav-knop .nav-tekst-dicht { position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-icoon { display: block; }
  .nav-icoon-dicht { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-icoon-open { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-icoon-dicht { display: block; }
  .nav-schakel:checked ~ .nav-knop .nav-tekst-open { display: none; }
  .nav-schakel:checked ~ .nav-knop .nav-tekst-dicht { display: inline; }
  .nav-schakel:focus-visible ~ .nav-knop { outline: var(--focus-width) solid var(--color-focus-ring);
                                           outline-offset: var(--focus-offset); }
  .nav-schakel:checked ~ .nav-knop { background: rgb(255 255 255 / .12); }
  .nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
            flex-direction: column; align-items: stretch; gap: 0;
            padding: var(--space-2) 0 var(--space-5);
            background: var(--glas); border-bottom: 1px solid var(--glas-lijn); box-shadow: var(--shadow-3); }
  /* Opengaan vloeit op dekking, dichtgaan is direct. */
  .nav-schakel:checked ~ ul { display: flex; transition: opacity var(--motion-base) var(--motion-ease); }
  @starting-style { .nav-schakel:checked ~ ul { opacity: 0; } }
  .nav ul > li { width: min(100% - var(--space-8), var(--wrap)); margin-inline: auto; }
  .nav ul > li > a:not(.knop) { display: block; padding-block: var(--space-3); }
  .nav ul > li > a.knop { display: block; text-align: center; margin-top: var(--space-3); }
  .nav { gap: var(--space-2); }
  .nav-thema { order: 0; margin: 0; padding-left: 0; border-left: 0; }
  /* Boven een foto ligt de kop los; het uitgeklapte menu hoort dan wel een
     grond te hebben, en die is er: het paneel zelf is glas. */
}
@media (max-width: 48rem) {
  .voet-onder { grid-template-columns: 1fr; }
  .voet-merk { grid-row: auto; }
  .hero { padding-block: var(--space-12); }
  .hero-foto { min-height: min(86vh, 48rem); padding-top: 7rem; padding-bottom: var(--space-10); }
  .hero h1 { max-width: none; }
  .product-regels li { grid-template-columns: 1fr; gap: var(--space-1); }
  .case-kaart { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
  .case-kaart-punten { display: grid; gap: var(--space-2); }
  .case-kaart-actie { justify-self: start; }
}

/* ---------------------------------------------------------------
   Keuzevelden in het aanvraagformulier voor een domeinnaam: een fieldset
   met radio's en het vinkje voor de voorwaarden. Zelfde maat en kleur als
   de tekstvelden; de legend doet wat het label bij een tekstveld doet.
   --------------------------------------------------------------- */
.keuzes { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.keuzes legend { font-weight: 600; font-size: var(--text-body-sm-size); padding: 0; margin-bottom: var(--space-2); }
.keuze { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
         font-weight: 400; font-size: var(--text-body-size); padding: var(--space-2) 0; cursor: pointer; }
.keuze input { margin: .3em 0 0; width: 1.1em; height: 1.1em; flex: none; }
.keuze span { line-height: 1.5; }
.vink .keuze { padding-top: 0; }
.keuzes[aria-invalid="true"] .keuze span, .vink [aria-invalid="true"] + span { color: var(--color-feedback-danger-fg); }
.formulier-domein .veld-hint { order: 0; }

/* ---------------------------------------------------------------
   Partnerschappen op /over-ons: op glas, zodat de witte partnerlogo's
   bruikbaar zijn. Zonder logobestand staat de naam in tekst, op dezelfde
   hoogte als een logo zou staan, zodat de rij niet verspringt.
   --------------------------------------------------------------- */
.partnerschappen { background: var(--glas); color: var(--mm-soft); padding-block: var(--sectie); }
.partnerschappen .sectiekop::before { --ritme: linear-gradient(to right, var(--shared-tundra) 0 50%, var(--mm-teal) 50% 100%); }
.partnerschappen-lijst { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid;
                         gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.partnerschap { border-top: 1px solid var(--glas-lijn); padding-top: var(--space-6); }
.partnerschap-merk { display: flex; align-items: center; height: 56px; text-decoration: none; color: inherit; }
/* Drie niveaus diep en met [src], om dezelfde reden als in de voet: de regel
   voor logo's in de lopende tekst verbergt elke -wit.svg in de lichte stand,
   en dit blok staat altijd op glas. */
.partnerschappen .partnerschap-merk img[src] { display: block; height: var(--logo-h, 40px); width: auto;
                                               max-width: 100%; margin: 0; opacity: .92; }
.partnerschap-naam { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--mm-soft); }
.partnerschap-rol { color: var(--tekst-op-donker); margin: var(--space-3) 0 0; font-size: var(--text-body-sm-size); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .partnerschap-merk:hover .partnerschap-naam { text-decoration: underline; text-underline-offset: .2em; }
}

/* ---------------------------------------------------------------
   Recent werk: schermafbeeldingen van gebouwde sites, op papier. Twee
   naast elkaar, de kaart is de link, het beeld bovenaan afgesneden zoals
   een scherm het toont.
   --------------------------------------------------------------- */
.werk { background: var(--papier); color: var(--papier-inkt); padding-block: var(--sectie); }
.werk .sectiekop { color: var(--papier-inkt); }
/* Onder elkaar, op volle breedte: de schermafbeelding is de inhoud en moet
   leesbaar zijn. Twee naast elkaar was te klein. */
.werk-lijst { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid;
              gap: var(--space-12); grid-template-columns: 1fr; max-width: 60rem; }
.werk-kaart a { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; }
.werk-beeld { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md);
              border: 1px solid var(--color-border); background: var(--mm-deep);
              transition: box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.werk-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* De mockup heeft zijn eigen witte studiogrond en schaduw: geen kader, geen
   donkere vulling en niet bijsnijden, anders vallen apparaten buiten beeld. */
.werk-beeld.werk-mockup { aspect-ratio: 1600 / 904; border: 0; background: transparent; border-radius: var(--radius-md); }
.werk-beeld.werk-mockup img { object-fit: contain; }
.werk-naam { font-weight: 600; margin-top: var(--space-2); }
.werk-wat { color: var(--tekst-op-tundra); font-size: var(--text-body-sm-size); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .werk-kaart a:hover .werk-beeld { box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .werk-kaart a:hover .werk-naam { text-decoration: underline; text-underline-offset: .2em; }
}

/* ---------------------------------------------------------------
   Wat de browser zelf tekent, en wie beweging heeft uitgezet.
   --------------------------------------------------------------- */
::selection { background: var(--mm-teal); color: var(--mm-deep); }
:root { caret-color: var(--mm-petrol); accent-color: var(--mm-petrol); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .knop:active, .thema:active, .nav-knop:active, .voet-leden li a:active, .case-kaart:active, .blok-logo-link:active,
  .case-uitgelicht-link:hover svg, .case-kaart:hover .case-kaart-actie svg { transform: none; }
  .faq details::details-content { transition: none; }
  .faq summary::after { transition: none; }
}