/* Mobiele correcties.
   Wordt na alle andere stijl geladen, zodat het ontwerp zelf onaangeroerd
   blijft en hier alleen staat wat op een telefoon misging. Elke regel hieronder
   komt uit een meting op 390 CSS-pixels, niet uit een aanname.
   Gemeten op 10 september 2026. */

/* ---------------------------------------------------------------
   1. Formuliervelden op 16px.
   Safari op iPhone zoomt automatisch in zodra een veld kleiner is dan 16px.
   De pagina springt dan scheef en de bezoeker moet handmatig terugzoomen,
   precies op het moment dat hij zijn gegevens invult. De velden stonden op
   15px, dus dat gebeurde op elke aanvraagpagina.
   --------------------------------------------------------------- */
@media (max-width: 820px) {
  .lw-form input,
  .lw-form textarea,
  .lw-form select,
  .field input,
  .field textarea,
  .field select {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------
   2. Aanraakvlakken.
   De links in de voettekst, in de inhoudsopgave van een artikel en onder de
   vervolgartikelen waren 18 pixels hoog. Met een vinger raak je dan net zo
   vaak de link ernaast. De tekst blijft even groot, alleen het vlak eromheen
   groeit, dus het ontwerp verandert niet zichtbaar.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .ft-in ul a,
  .art-toc ol a {
    display: inline-block;
    padding: 7px 0;
  }
  .ft-in ul { gap: 4px; }

  .link-plain,
  .bl-meer {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  .lw-form label,
  .field label {
    display: inline-block;
    padding-bottom: 4px;
  }

  /* De naam linksboven is de weg terug naar de homepage en werd met 25 pixels
     hoogte net te vaak gemist. */
  .nav-in .logo {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .eyebrow a {
    display: inline-block;
    padding: 6px 2px;
  }
}

/* ---------------------------------------------------------------
   3. De kleinste echte tekst.
   Alles onder de 12px is op een telefoon lastig te lezen. De piepkleine tekst
   in de nagebootste browservensters laten we staan: dat is een afbeelding van
   een scherm en geen tekst om te lezen.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .fine { font-size: 13px; line-height: 1.5; }
  .bl-meta,
  .art-meta span { font-size: 12px; }
  .reis-label,
  .reis-hint { font-size: 12px; }
}

/* ---------------------------------------------------------------
   4. Geen blauwe tikvlek en geen dubbeltik-zoom op knoppen.
   --------------------------------------------------------------- */
a, button, summary, .xrow[data-uitleg], .xrow[data-topic] {
  -webkit-tap-highlight-color: rgba(11, 11, 12, .08);
}
button, .btn, .xrow[data-uitleg], .xrow[data-topic] {
  touch-action: manipulation;
}

/* ---------------------------------------------------------------
   5. Sierbeeld en scroll-animaties horen niet op een telefoon.

   Op een laptop zijn dit de blikvangers. Op een telefoon worden het blokken
   van onleesbaar kleine schermpjes waar je langs moet scrollen voordat je bij
   de tekst komt, en ze kosten bovendien het meeste laadwerk van de hele
   pagina. De inhoud eronder blijft volledig staan.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  /* De bewegende collage boven aan de homepage. Scheelt ook 23 afbeeldingen. */
  .hero-shot-wrap { display: none; }
  .hero-in { min-height: 0; padding-top: 8px; padding-bottom: 16px; }
  .hero-copy-wrap { margin-top: 0; }
  /* De ruimte onder de hero was er voor de collage. Die staat er niet meer. */
  .hero { padding-top: 16px; }

  /* Het vastgeprikte scherm op de werkwijze-pagina. De stappen zelf blijven,
     die dragen de inhoud; alleen het meescrollende beeld ernaast gaat eruit. */
  .ws-toneel { display: none; }
  .ws-stap {
    min-height: 0;
    padding: 34px 0;
    opacity: 1;
  }

  /* De actieve stap werd door het meescrollende beeld aangestuurd. Zonder dat
     beeld blijft er willekeurig één stap "actief", en die kreeg een gevulde
     cirkel waarin het nummer wegviel. Op een telefoon zien alle vijf de
     nummers er daarom hetzelfde uit. */
  .ws-stap.is-actief .nr {
    background: transparent;
    color: inherit;
    border-color: rgba(var(--on-band-rgb), .3);
  }
}

/* ---------------------------------------------------------------
   6. Het menu.
   "Diensten" zit in een omhullende div en de rest niet. Daardoor telde de
   verticale ruimte van dat ene item niet mee en stond het dichter op de regel
   eronder dan de andere. Alle items nu even hoog.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links > .nav-item-mega > a,
  .nav-links > a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .nav-links { gap: 2px; }
}

/* ---------------------------------------------------------------
   7. De naam onder in de voettekst mag het scherm vullen.
   Op een telefoon greep hij terug op de ondergrens van de clamp en bleef er
   een brede marge over.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  /* 16vw is de grootste maat waarbij het breedste woord ("Modern") nog binnen
     de kaart past. Daarboven knipt .ft-giant het middenin een letter af, en dan
     leest het als een fout in plaats van als een ontwerp. Nagemeten op 360, 390
     en 430 pixels breed. */
  .ft-giant b { font-size: clamp(3.2rem, 16vw, 10.5rem); }
}

/* ---------------------------------------------------------------
   8. "Geen kat in de zak" botste op de knop erboven.
   Dat bovenregeltje staat absoluut op top:-38px. Naast elkaar klopt dat, maar
   zodra de twee kolommen onder elkaar vallen wordt het de ruimte tussen de
   cellen in getrokken en komt het over de knop van de cel erboven te liggen.
   Op een telefoon laten we het gewoon meelopen in de tekst.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .freebie-in > div:last-child {
    text-align: left;
    margin-left: 0;
  }
  .freebie-in > div:last-child .eyebrow {
    position: static;
    justify-content: flex-start;
    margin-bottom: 12px;
  }
  .freebie h2 {
    margin-left: 0;
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   9. Tekst die de bezoeker echt leest naar minimaal 12px.

   Uit de doorloop van alle achttien sjablonen op 390 pixels. Per regel staat
   erbij waar het zit. De tekst binnen de nagebootste browservensters
   (.bs-adres, .vn-laag .oud, .vn-laag .nieuw) blijft klein: dat is een
   afbeelding van een scherm en geen tekst om te lezen.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .bouw-stap i { font-size: 12px; }              /* de stapnummers 01 tot 05 */
  .pf-feit .k { font-size: 12px; }               /* labels bij de kengetallen */
  .dl-tags i { font-size: 12px; }                /* labels op de dienstenlijst */
  .ps-ring span { font-size: 12px; }             /* labels onder de scores */
  .bk-dag u { font-size: 12px; }                 /* de dagnummers in de agenda */
  .ob-groep > span { font-size: 12px; }          /* kopjes in de offertebouwer */
  .ct-kaart .k { font-size: 12px; }              /* labels op de contactkaarten */
  .bl-thumb i { font-size: 12px; }               /* leestijd op een blogkaart */
  .art-kort .k,
  .art-toc .k,
  .art-vervolg .k { font-size: 12px; }           /* labels rond een artikel */
  .vn-label { font-size: 12px; }                 /* "voor" en "na" bij de vergelijking */
}

/* ---------------------------------------------------------------
   10. De advertentiepagina heeft een eigen kop en voet.
   Die viel buiten de regels hierboven, en daar werd het mailadres op een
   telefoon teruggebracht tot een pictogram van 16 bij 16 pixels.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .lp-head .logo {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .lp-tel {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .lp-voet a,
  .lp-foot a {
    display: inline-block;
    padding: 7px 0;
  }
}

/* Punt 11 (de scores op de dienstenpagina en de te smalle oproepbalk) is
   opgelost bij de bron: de @media-blokken staan nu achteraan in elke
   p-<sjabloon>.css, zodat de mobiele regels uit het ontwerp niet meer
   overschreven worden door basisregels die er in de export achter stonden.
   Zie de kop van assets/css/p-home.css. */