/* Janneke Zorgt: klantlaag bovenop de bevroren template */
/* staand logo (hoofd met hart): groter in het plateau zodat "Janneke zorgt" leesbaar blijft */
.logo-plateau .logo-beeld{height:122px;max-width:none}
.header.geschrompeld .logo-plateau .logo-beeld{height:92px}
@media(max-width:1100px){.logo-plateau .logo-beeld{height:96px}.header.geschrompeld .logo-plateau .logo-beeld{height:80px}}
@media(max-width:640px){.logo-plateau .logo-beeld{height:60px;max-width:none}.header.geschrompeld .logo-plateau .logo-beeld{height:54px}}
/* footer is zwart en het logo heeft zwarte lijnen: het logo blijft ongewijzigd, de ondergrond wordt licht */
.footer .footer-logo .logo-beeld-donker{height:110px;background:#fff;border-radius:16px;padding:8px 14px}
/* dienstkaarten: icoon in plaats van foto */
.kaart-icoon{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);border:1px solid rgba(var(--accent-rgb),.35)}
.kaart-icoon svg{width:36px;height:36px;fill:none;stroke:var(--ink)}
/* ervaringsgebieden, plaatsen en tips zonder foto: verloop in navy en zand */
.projectkaart.ervaring::before{background:radial-gradient(circle at 80% 15%,rgba(217,193,151,.35),transparent 55%)}
.projectkaart.ervaring::after{background:linear-gradient(rgba(var(--ink-rgb),0) 30%,rgba(var(--ink-rgb),.55) 100%)}
.projectkaart.ervaring .binnen{inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px}
.projectkaart.ervaring h3{font-size:clamp(18px,1.7vw,22px)}
/* formulier zonder voor/na-foto */
.calc-kaart.zonder-voorna{grid-template-columns:1fr;max-width:760px}
.knop-licht{background:var(--tint)}
.foto{background:var(--tint2)}
/* hero op de telefoon: staande uitsnede van dezelfde foto's (drie dia's sinds 29-10-2026: de twee selfies zijn eruit, te zacht en korrelig op schermgrootte) */
@media(max-width:900px){
  .hero-baan .hero-dia:nth-child(1){background-image:url('../img/hero-janneke-4-m.webp')!important}
  .hero-baan .hero-dia:nth-child(2){background-image:url('../img/hero-janneke-2-m.webp')!important}
  .hero-baan .hero-dia:nth-child(3){background-image:url('../img/hero-janneke-3-m.webp')!important}
}

/* ===== volledige site (16-10-2026) ===== */
/* Header (vaste regel Simon 14-10-2026): doorzichtig over de hero, na het scrollen een eigen
   dekkende achtergrond in de donkere huisstijlkleur. Logo en witte menutekst blijven gelijk. */
.header{transition:background-color .4s ease}
.header.geschrompeld{background-color:rgba(34,44,78,.96)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* ankers komen onder de vaste header vandaan */
section[id],h2[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
/* taalknop in het menu */
.nav-links .taal-link{font-size:14px!important;font-weight:600;letter-spacing:.08em;border:1px solid rgba(255,255,255,.55);
  border-radius:999px;padding:4px 11px;line-height:1.2}
.nav-links .taal-link:hover{border-color:#fff}
/* 'Kort samengevat' bovenaan inhoudspagina's */
.kortblok{margin-bottom:22px;text-align:left}
.kop-blok .kortblok{max-width:760px;margin:0 auto 22px}
.feiten-balk + .kortblok{margin-top:6px}
/* galerij op ervaringspagina's: twee staande foto's naast elkaar */
.ervaring-galerij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);max-width:900px;margin:0 auto}
.ervaring-galerij .foto{aspect-ratio:4/5}
.ervaring-galerij .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
@media(max-width:640px){.ervaring-galerij{grid-template-columns:1fr}}
/* tags op de kennisbankkaarten: overal dezelfde kleur */
.tip-overlay .tip-tag{background:rgba(255,255,255,.2);color:#fff}
/* diensten: verdiepingslinks onder de aanpak */
.aanpak-inhoud + .zijbalk-blok ul li{margin:6px 0}
/* juridische tekst: lijsten netjes */
.juridisch ul{padding-left:20px;margin:10px 0 16px}
.juridisch a{color:var(--accent)}
@media print{.header,.zwevend-knop,.bel-knoppen,.cta-strook,#offerte-samenstellen,.ck-banner{display:none!important}
  body{background:#fff}.reveal,.stagger>*{opacity:1!important;transform:none!important}}
/* hero-kop: de langste wisseltitel ("ZZP-verpleegkundige met ruime ervaring in de zorg") mag op
   desktop breder lopen, zodat kop en knop ook op een laag scherm (1280x720) boven de vouw blijven */
@media(min-width:1024px){
  .hero-met-form>.hero .hero-titel{max-width:620px;min-height:3em}
}
@media(min-width:1024px) and (max-height:820px){
  .hero-met-form>.hero .hero-titel{font-size:30px;line-height:1.35;min-height:2.7em}
  .hero-met-form>.hero .hero-label{margin-bottom:14px}
  .hero-met-form .hero-beloftes{margin-top:18px;gap:9px}
}
/* dienst-hero op de telefoon: lange woorden en speclijst blijven binnen het scherm */
@media(max-width:640px){
  .product-hero h1{font-size:30px;overflow-wrap:break-word;hyphens:manual}
  .spec-lijst{max-width:100%}
  .spec-lijst li{font-size:15px}
}
/* v205: logo valt bovenaan niet meer buiten beeld (plateau 146px, logo 122px) */
@media(min-width:1101px){.header:not(.geschrompeld) .logo-plateau{align-items:flex-start;padding-top:12px}}
/* v205: geen schaduwrand van de formulierkaart onder de kop in de hero-kaart */
@media(min-width:1024px){.hero-met-form #offerte-samenstellen .calc-kaart{box-shadow:none}}
/* v212: werkgebiedkaarten zonder wazige kaartuitsnede: een rustige, gelijke navy achtergrond met de plaatsnaam */
.projectkaart.plaats{background:linear-gradient(155deg,#222C4E 35%,#4a4f63 75%,#D9C197 150%)}
/* v205: footerregel en laatste inhoud vrij van de zwevende knoppen */
@media(min-width:901px){.footer-onder{padding-right:76px}}
@media(max-width:900px){.footer-onder{padding-bottom:124px}}
/* v205: in het kleine raster op de homepage is geen ruimte voor het motief boven de titel */
/* v206 (21-10-2026): de volledige site heeft geen conceptbalk, dus de zwevende knoppen staan weer op de
   onderrand (14px). De knop "Aanvraag doen" verdwijnt zacht zolang het kennismakingsformulier onderin
   beeld staat, zodat hij nooit over de intro van dat formulier valt. */
@media(max-width:900px){.zwevend-knop,.bel-knoppen{bottom:14px}}
.zwevend-knop{transition:opacity .4s ease,transform .4s ease}
.zwevend-knop.is-weg{opacity:0;transform:translateY(12px);pointer-events:none}
/* v206: h1 op over-mij in hetzelfde gewicht als alle koppen uit het concept (700) */
.over-hero h1{font-weight:700}

/* ===== socials Instagram en Facebook (28-10-2026): eigen merkkleuren met een cirkelrand ===== */
.social-iconen{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.social-iconen a{display:inline-flex;width:38px;height:38px;border-radius:50%;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.social-iconen a:hover{transform:translateY(-2px)}
.social-iconen svg{width:100%;height:100%;display:block}
.nav-social{gap:8px;margin-right:4px}
.nav-social a{width:34px;height:34px}
@media(max-width:1599px){.nav-social{display:none}}
.menu-social{display:flex;justify-content:center;margin:6px 0 4px}
.footer-social{display:flex;justify-content:center;margin-top:16px}
.social-regel{margin:clamp(26px,3vw,40px) 0 10px;color:var(--tekst);font-weight:600}
.social-regel+.social-iconen{display:flex;margin-bottom:clamp(28px,3.5vw,44px)}
.mobiel-menu .menu-social a{display:inline-flex;padding:0;border-bottom:0;width:38px;height:38px}

/* ===== reparatieronde 28-10-2026 (v208) ===== */
/* hero-kop staat vast (geen wisseltitel meer): geen gereserveerde lege regel tussen kop en alinea */
@media(min-width:1024px){.hero-met-form>.hero .hero-titel{min-height:0}}
@media(min-width:1024px) and (max-height:820px){.hero-met-form>.hero .hero-titel{min-height:0}}
/* v212: de herofoto's zijn met Real-ESRGAN opgeschaald naar 2800 breed (gecontroleerd), dus geen bewuste blur meer;
   alleen de iets diepere navy waas op brede schermen blijft voor de leesbaarheid van de kop */
@media(min-width:1400px){
  .hero-dia::after{background:linear-gradient(180deg,rgba(var(--ink-rgb),.62) 0%,rgba(var(--ink-rgb),.5) 42%,rgba(var(--ink-rgb),.66) 100%)}
}
/* over-mij: navy onder de header en de beige huisstijlachtergrond, geen zandbruine hero */
.over-hero{background:linear-gradient(var(--ink) 0,var(--ink) var(--header-h),var(--tint2) var(--header-h))}
/* rode knoppen in zijbalk en artikelblok: altijd witte tekst, ook binnen de linkstijl van de zijbalk */
.zijbalk-blok a.knop.knop-accent,.artikel-cta a.knop.knop-accent,.artikel-inhoud a.knop.knop-accent{color:var(--op-accent);text-decoration:none}
.zijbalk-blok a.knop.knop-accent:hover{color:var(--op-accent);text-decoration:none}
/* voettekst: social-iconen links, in lijn met het logo en de lijst */
.footer-social{justify-content:flex-start}
@media(max-width:640px){.footer-social{justify-content:center}}  /* op de telefoon is de hele kolom gecentreerd */
/* tijdlijn op de telefoon: kaarten blijven binnen de container, met de gewone marge rechts */
@media(max-width:720px){
  .tijdlijn-vert{overflow-x:visible}
  .tlv-rij{grid-template-columns:52px minmax(0,1fr)}
  .tlv-kaart{min-width:0;padding:22px 20px}
}
/* intakekaart in de hero past volledig op lage schermen (1280x720, reparatie 28-10-2026) */
@media(min-width:1024px) and (max-height:800px){
  .hero-met-form>#offerte-samenstellen{padding-top:calc(var(--header-h) + 12px)!important}
  .hero-met-form>#offerte-samenstellen .kop-blok{padding-top:18px}
  .hero-met-form>#offerte-samenstellen .kop-blok h2{font-size:22px}
  .hero-met-form>#offerte-samenstellen .kop-blok p{font-size:13px;line-height:1.4}
  .hero-met-form>#offerte-samenstellen .calc{padding:10px 28px 16px}
  .hero-met-form .calc-stap .calc-tegels{min-height:150px}
  .hero-met-form .calc-tegel{padding:9px 6px}
}
/* reparatie 28-10-2026: zwevende knoppen wijken op mobiel zolang er tekst achter ligt (site.js) */
.zwevend-knop,.bel-knoppen{transition:opacity .2s ease,transform .2s ease}
.zwevend-knop.wijkt,.bel-knoppen.wijkt{opacity:0;pointer-events:none}
.zwevend-knop.meet,.bel-knoppen.meet{pointer-events:none}

/* reparatie 28-10-2026 ronde 3: alinea's in de ervaringspagina's krijgen witruimte, net als op de artikelpagina's */
.split p + p{margin-top:14px}

/* hero naast het formulier (reparatie 29-10-2026, vervangt de ingezoomde uitsneden): elke dia staat op ware hoogte
   en wordt dus alleen verkleind, nooit opgerekt. De foto loopt onder de kaart door en gaat daar over in de donkere
   huisstijlkleur; op heel brede schermen ook links. Dia 1 is foto 4 (19:40, met toestemming); dia 2 en 3 (rollator, bloemen) gebruiken een smallere uitsnede rond de gezichten (-breed). */
@media(min-width:1201px){
  .hero-baan .hero-dia{background-color:var(--ink);background-repeat:no-repeat!important;
    background-size:100% 100%,auto 100%!important;background-position:0 0,right calc(50vw - 330px) center!important}
  .hero-baan .hero-dia:nth-child(1){background-image:linear-gradient(90deg,var(--ink) calc(50% - 1150px),rgba(var(--ink-rgb),0) calc(50% - 1000px),rgba(var(--ink-rgb),0) calc(50% + 140px),var(--ink) calc(50% + 330px)),url('../img/hero-janneke-4.webp')!important}
  .hero-baan .hero-dia:nth-child(2){background-image:linear-gradient(90deg,var(--ink) calc(50% - 1150px),rgba(var(--ink-rgb),0) calc(50% - 1000px),rgba(var(--ink-rgb),0) calc(50% + 140px),var(--ink) calc(50% + 330px)),url('../img/hero-janneke-2-breed.webp')!important}
  .hero-baan .hero-dia:nth-child(3){background-image:linear-gradient(90deg,var(--ink) calc(50% - 1150px),rgba(var(--ink-rgb),0) calc(50% - 1000px),rgba(var(--ink-rgb),0) calc(50% + 140px),var(--ink) calc(50% + 330px)),url('../img/hero-janneke-3-breed.webp')!important}
}


/* v216 (reparatieronde 3): footerinhoud in dezelfde container als de secties (1140px, zelfde zijpadding) */
.footer-boven,.footer-onder{max-width:1140px}
/* ervaringskaarten overal met foto: het zandkleurige gloedje alleen op kaarten zonder foto */
.projectkaart.ervaring.met-foto::before{background:none}
/* tip- en kennisbankkaarten zonder foto: compact, geen leeg vlak boven de tekst */
.tip-overlay.ervaring{aspect-ratio:auto;align-items:center}
.tip-overlay.ervaring::after{background:radial-gradient(circle at 85% 10%,rgba(217,193,151,.22),transparent 55%)}
.tip-overlay.ervaring .binnen{padding:30px 26px 28px}
/* werkgebiedkaarten: lager, tekst in het midden, eigen regel per plaats */
.projectkaart.plaats{aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.projectkaart.plaats .binnen{position:relative;inset:auto;width:100%;padding:28px 22px}
.projectkaart.plaats p{margin-top:2px}
/* v218 (kwaliteitscontrole 07-11): ervaringstegels met foto lichter, zodat het beeld herkenbaar blijft; tekst leesbaar via schaduw */
.projectkaart.ervaring.met-foto::after{background:none}
.projectkaart.ervaring.met-foto h3,.projectkaart.ervaring.met-foto p,.projectkaart.ervaring.met-foto .binnen>*{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(20,26,48,.45)}
/* v219 (kwaliteitscontrole 07-11): juridische pagina's en sitemap gelijke afstand onder de hero als de artikelpagina's */
.juridisch>h2:first-child,.juridisch>.reveal:first-child{margin-top:0}
/* sitemap: gecentreerd en ruimer, links als rustige pillen */
.sitemap-blok{max-width:980px}
.sitemap-blok h2{text-align:center}
.sitemap-lijst{list-style:none;padding:0!important;margin:14px 0 30px!important;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.sitemap-lijst li a{display:inline-block;padding:8px 16px;border:1px solid rgba(var(--ink-rgb),.16);border-radius:999px;font-size:15px;line-height:1.35;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .4s ease,color .4s ease}
.sitemap-lijst li a:hover{border-color:var(--accent);color:var(--accent)}
/* v220 (kwaliteitscontrole 07-11): socials in de header op geen enkel desktopformaat (wel in het mobiele menu,
   de footer en op de contactpagina), zodat de header op 1280 tot 2560 overal gelijk is */
.nav-social{display:none!important}
/* telefoon in de header op 1201-1360 als belicoon, zodat hij op elk desktopformaat in beeld staat */
@media(min-width:1201px) and (max-width:1360px){
  .nav-tel{display:inline-flex!important;font-size:0!important;gap:0;padding:8px}
  .nav-tel svg{width:18px;height:18px}
}
/* rode CTA-kaart niet meer half over de zwarte footer: eigen achtergrond en ruimte eronder */
.cta-strook{margin-bottom:0;padding-bottom:clamp(56px,7vw,80px)}
.cta-strook.cta-wit{background:var(--wit)}
.cta-strook.cta-tint2{background:var(--tint2)}
.cta-strook.cta-grijs{background:var(--bg)}
.cta-strook + .footer{padding-top:clamp(56px,7vw,80px)}
/* mobiel: beide hero-knoppen even hoog met de tekst op dezelfde lijn */
@media(max-width:900px){
  .hero-knoppen .knop{min-height:48px;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;padding:12px 22px;box-sizing:border-box}
}