/* Mobiele aanpassingen — afgeleid uit stijlen.css door bouw/mobiel.py.
   Het ontwerp is desktop-first en kent geen mobiele variant; dit maakt
   de pagina's bruikbaar op een telefoon, niet pixelperfect.
   Niet met de hand bewerken: draai het script opnieuw. */

@media (max-width: 900px) {
  /* zijmarges terug van 56px naar 20px */
  .s1,.s148,.s167,.s228,.s235,.s242,.s25,.s251,.s255,.s256,.s269,.s282,.s287,.s289,.s294,.s297,.s312,.s317,.s318,.s346,.s351,.s353,.s363,.s367,.s380,.s6,.s70,.s79 { padding-left: 20px !important; padding-right: 20px !important; }

  /* alle meerkoloms rasters worden één kolom */
  .s152,.s179,.s256,.s269,.s28,.s282,.s287,.s318,.s368,.s410,.s421,.s425,.s429 { grid-template-columns: 1fr !important; }

  /* koppen terugschalen */
  .s7 { font-size: 35px !important; line-height: 1.15 !important; }
  .s253 { font-size: 28px !important; line-height: 1.15 !important; }
  .s295 { font-size: 28px !important; line-height: 1.15 !important; }
  .s349 { font-size: 35px !important; line-height: 1.15 !important; }
  .s365 { font-size: 35px !important; line-height: 1.15 !important; }
  .s319 { font-size: 33px !important; line-height: 1.15 !important; }
  .s237 { font-size: 30px !important; line-height: 1.15 !important; }
  .s386 { font-size: 30px !important; line-height: 1.15 !important; }
  .s74 { font-size: 29px !important; line-height: 1.15 !important; }
  .s26 { font-size: 27px !important; line-height: 1.15 !important; }
  .s80 { font-size: 27px !important; line-height: 1.15 !important; }
  .s150 { font-size: 27px !important; line-height: 1.15 !important; }
  .s177 { font-size: 27px !important; line-height: 1.15 !important; }
  .s229 { font-size: 27px !important; line-height: 1.15 !important; }
  .s356 { font-size: 24px !important; line-height: 1.15 !important; }
  .s260 { font-size: 24px !important; line-height: 1.15 !important; }
  .s291 { font-size: 24px !important; line-height: 1.15 !important; }
  .s377 { font-size: 24px !important; line-height: 1.15 !important; }

  /* vaste hoogtes soepeler maken */
  .s71 { height: auto !important; min-height: 320px !important; }
  .s12 { height: auto !important; min-height: 320px !important; }
  .s352 { height: auto !important; min-height: 320px !important; }

  /* tegels van de schuifrij passend maken */
  .s101,.s13,.s31,.s83,.s93 { width: 78vw !important; }

  /* Secties die zichzelf over hun buur heen trekken. Op desktop is dat
     een bewust effect, op een telefoon liggen ze er dwars overheen. */
  .s77 { margin-top: 0 !important; }  /* was -240px */
  .s148 { margin-top: 0 !important; }  /* was -220px */

  /* De schuifsectie werkt op mobiel net als op desktop: de sectie plakt
     vast en de tegels schuiven van rechts naar links mee met het naar
     beneden scrollen, tot ze op zijn.

     Dit was eerder een gewone veegrij, met height:auto op de sectie. Dat
     brak de sectie erna: die heeft margin-top:-220px, bedoeld om in de
     lange staart van deze sectie te verdwijnen. Zonder die staart trok
     hij zichzelf dwars over de tegels heen. Haal je het vastplakken hier
     weg, haal dan ook die negatieve marge weg. */
  #hscroll-track { padding-left: 20px !important; padding-right: 20px !important; }

  /* Het menu past niet naast het logo. Het zit achter de hamburger:
     zolang die dicht is blijft de nav verborgen, en basis.css klapt hem
     uit met de sterkere regel `header.menu-open nav`. */
  header nav { display: none !important; }

  /* De takenkaart 'Vandaag in jouw CRM' hoort er op een telefoon ook
     te staan. Hij ligt over de onderkant van de foto en steekt er
     onderuit; de kaart wordt smaller en toont twee rijen in plaats
     van drie, zodat hij niet de halve foto opslokt.
     De haken zijn vaste klassen (takenkaart, takenlijst), nooit sNN. */
  /* De foto mag hoger en hoeft niet zijn volle breedte te tonen: hij
     vult het vlak en snijdt bij.

     De marge onderaan draagt twee dingen: de 180px die de kaart
     onderuit hangt, plus 75px lucht tot de zin eronder. Dat moet in
     EEN waarde, want aangrenzende marges klappen samen -- een
     margin-top op die zin telt er niet bij op maar verdwijnt erin. */
  #hero-foto { height: 400px !important; margin-bottom: 255px !important; }
  #hero-foto > .foto { height: 100% !important; min-height: 0 !important;
                       object-fit: cover; object-position: 50% 45%; }

  /* De kaart staat maar met een klein stukje in de foto en hangt er
     verder onderuit. Sterker dan de afgeleide .s13-regel hierboven,
     zodat dit niet van de volgorde in dit bestand afhangt. */
  #hero-foto > .takenkaart {
    left: 50% !important; right: auto !important;
    transform: translateX(-50%);
    bottom: -180px !important;
    width: min(92%, 400px) !important;
    box-sizing: border-box;
    padding: 16px !important;
    background: rgba(255,255,255,0.94) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.20) !important;
  }
  /* de chip past er niet naast; die gaat eronder */
  .takenkop { flex-direction: column; align-items: flex-start !important;
              gap: 8px; }
  .takenlijst { height: 140px !important; }
  /* de tijd- en statuslabels rechts kosten breedte en zeggen op een
     telefoon weinig; zonder staat de rij netter */
  .taakstatus { display: none !important; }

  /* Vera-banner. De tekst begon 64px van de rand -- op een telefoon is
     dat te ver naar binnen. En de foto stond op zijn natuurlijke hoogte,
     waardoor het blauwe vlak half leeg bleef. Hij vult het vlak nu en
     mag bijsnijden in plaats van de volle breedte te tonen; het
     zwaartepunt ligt rechts, waar Vera zit, want links ligt de tekst
     eroverheen. */
  /* idem, sterker dan de afgeleide .s71-regel */
  div.verabanner { height: 420px !important; }
  div.verabanner > .foto { height: 100% !important; min-height: 0 !important;
                        object-fit: cover; object-position: 70% 35%; }
  .veratekst { left: 20px !important; right: 20px !important;
               max-width: none !important; }
}

@media (max-width: 560px) {
  /* De twee knoppen onder de titel wikkelen op een telefoon toch al
     onder elkaar; even breed staat dan rustiger dan twee verschillende
     pillen. */
  .heroknoppen { flex-direction: column; align-items: stretch; }
  .heroknoppen > a { display: block; width: 100%; box-sizing: border-box;
                     text-align: center; }
}

@media (max-width: 560px) {
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
}