/* =====================================================================
   GeneralExperts-IT — mobiele laag

   Wordt alleen op telefoons ingeladen (media="(max-width:767px)"), dus
   desktopbezoekers downloaden en verwerken deze regels niet.

   Uitgangspunt: een telefoon is geen smal bureaublad. De verhoudingen die
   op 1440px kloppen — 28px kaartmarges, 44px koppen, ruime witruimte —
   vreten op 390px de halve breedte op en maken de pagina eindeloos lang.
   Deze laag herstelt drie dingen die gemeten fout waren:
     1. 27 aanraakvlakken kleiner dan de 44px die een vinger nodig heeft
     2. kaartmarges die 16% van de schermbreedte kostten
     3. een verticaal ritme dat voor grote schermen was gekozen
   ===================================================================== */

/* ---------- 1. knoppen op volle breedte ----------
   De minimumhoogtes voor aanraakvlakken staan in site.css onder
   pointer:coarse, zodat een tablet ze ook krijgt. Hier staat alleen wat
   echt telefoon-specifiek is: knoppen die de hele kolom vullen. */
.btn{width:100%;padding:14px 20px}
.slot-acties .btn,.welkom-ctas .btn{width:100%}
.kh-opties button{width:100%}
.pd-terug{padding:12px 18px}

/* ---------- 2. kaarten en containers ----------
   28px marge links en rechts kost op 390px samen 56px. Op 20px blijft er
   ruim 10% meer regelbreedte over, wat de pagina korter en rustiger maakt. */
.container{padding:0 18px}
.card{padding:22px 20px}
.card h3{font-size:1.05rem;margin-bottom:8px}
.card p{font-size:.94rem}

/* ---------- 3. verticaal ritme ----------
   Kortere secties: de pagina was op mobiel ruim 22.000px hoog. */
section{padding:56px 0}
.sec-head{margin-bottom:34px}
.sec-head h2{font-size:clamp(1.5rem,6.8vw,1.9rem);line-height:1.12}
.sec-head .sub{font-size:.96rem}
.sec-head p{font-size:.95rem}
.grid{gap:14px}

/* ---------- 4. leesbaarheid ----------
   Op een smal scherm bepaalt de kolom de regellengte al; een extra
   maximum zou alleen maar ongebruikte ruimte overlaten. */
section p,section li{max-width:none}

/* ---------- 5. rustiger renderen ----------
   backdrop-filter en grote schaduwen zijn op telefoons duur en zorgen voor
   haperend scrollen. De vormgeving blijft, de kosten gaan omlaag. */
.card,.slotblok{box-shadow:0 8px 24px rgba(0,0,0,.4)}


/* ---------- 6. het slotblok ---------- */
.slotblok{padding:28px 20px}
.slotblok h2{font-size:1.5rem}
.slot-punten{padding-top:20px;font-size:.85rem}


/* ---------- 7. Website Lab ----------
   De mock-up is op een telefoon maar ~350px breed. In de desktopverhouding
   (16/10.4) blijft er dan 207px over voor zes secties die er 255 nodig
   hebben, en zakken de labels naar 7px. Daarom hier een eigen verhouding:
   staander en compacter, wat de onepage-boodschap juist versterkt. */
.m-doek{aspect-ratio:16/14}
.m-scene{padding:9px}
.one-rol{gap:4px;padding-left:11px}
.one-sec{gap:2px}
.one-kop{font-size:.68rem}
.one-werk u{height:24px}
.one-werk b{font-size:.6rem}
.one-nav b{font-size:.66rem}
.one-nav u{font-size:.56rem}
.one-hero{padding:6px;gap:7px}
.one-portret{width:30px;height:30px}
.one-portret img{width:22px;height:22px}
.one-diensten u{height:13px}
.multi-nav b{font-size:.62rem}
.multi-nav u{font-size:.54rem}
.pg-kop{font-size:.6rem}
.pg-team u,.pg-diensten u{height:16px}
/* de sitemap zou op deze maat met de punten botsen */
.m-sitemap{right:9px;bottom:9px;padding:4px 5px}

/* ---------- 8. contactpagina ---------- */
.contact-wrap{gap:20px}
.contact-gate{padding:24px 20px}
.form-card{padding:20px 16px}
.form-row{grid-template-columns:1fr;gap:0}
/* 16px voorkomt dat iOS bij het focussen automatisch inzoomt */
.form-card input,.form-card select,.form-card textarea{font-size:16px;min-height:46px}
.form-card textarea{min-height:130px}

/* ---------- 9. Mijn Projecten ----------
   Eén kaart per rij is al geregeld in site.css; hier alleen de binnenmarges
   in hetzelfde ritme als de andere kaarten op een telefoon. */
.pk-venster{padding:10px}
.pk-tekst{padding:20px 18px 22px}
.pk-titel{font-size:1.15rem}
.pk-om{font-size:.94rem;margin-bottom:16px}
.pk-tags{margin-bottom:18px}
.pk-knop{width:100%;justify-content:center}
.pl-plus{font-size:2rem}
.pl-tekst{font-size:.72rem}