/* ==========================================================================
   elcura.nl

   Opbouw in volle banen, niet in kaartjes. Witte blokjes die op een lichte
   achtergrond zweven is precies het sjabloon dat elke zzp-zorgsite draagt;
   deze pagina wisselt in plaats daarvan tussen lichte banen en banen in diep
   aubergine, met één baan in gebrand oranje als hoogtepunt.

   Kleur: aubergine draagt de structuur, oranje is het enige accent. Bewust
   geen zorggroen, geen kliniekblauw en geen goud: het eerste leest als
   huisartsenpraktijk, het laatste als luxemerk. Aubergine met oranje is warm
   en menselijk zonder kinderachtig te worden, en dat is waar jeugdwerk zit.

   Type: systeemsans op display-formaat, zwaar en strak gespatieerd, met
   monospace voor de kleine labels. Geen Google Fonts, want die logt het
   IP-adres van elke bezoeker.
   ========================================================================== */

:root{
  --papier:#faf6f4;         /* warm bijna-wit, een zweem roze, geen crème */
  --vlak:#ffffff;           /* alleen nog voor het formulier */

  --diep:#35204a;           /* aubergine baan */
  --diep-2:#241531;         /* diepste baan en voet */

  --inkt:#241830;           /* koppen op licht */
  --inkt-dof:#52425e;       /* lopende tekst op licht */
  --inkt-stil:#63536f;      /* bijschriften; lichter zakt onder AA 4,5 */
  --lijn:#e4dbe2;

  --accent:#c24a26;         /* knoppen en de oranje baan */
  --accent-diep:#a83e1e;    /* links en tekst op licht, hoger contrast */
  --accent-warm:#ff8a5b;    /* accent op een donkere baan */
  --accent-licht:#fdf0e9;

  /* Tekst op de donkere banen. */
  --op-diep:rgba(255,255,255,.82);
  --op-diep-stil:rgba(255,255,255,.62);
  --op-diep-lijn:rgba(255,255,255,.18);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;

  --breed:1240px;
  --rand:28px;
  --rond:20px;              /* alleen foto en formulier; banen zijn recht */
  --pil:999px;
  --uit:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;background:var(--papier)}
body{
  margin:0;
  font:1.0625rem/1.65 var(--sans);
  color:var(--inkt-dof);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent-diep)}
a:hover{color:var(--inkt)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

h1,h2,h3{color:var(--inkt);margin:0;font-weight:800;letter-spacing:-.035em;line-height:1}
h1{font-size:clamp(2.9rem,7.2vw,5.4rem);line-height:.96}
h2{font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.02;letter-spacing:-.032em}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.15;font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.omhullend{max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}
.blok{padding:clamp(72px,10vw,128px) 0}
.inleiding{font-size:1.14rem;max-width:56ch;color:var(--inkt-dof)}
.fijn{font-size:.9rem;color:var(--inkt-stil)}
.meta{font:.76rem/1.5 var(--mono);letter-spacing:.06em;color:var(--inkt-stil)}

/* --------------------------------------------------------- banen
   Een baan loopt van rand tot rand en neemt zijn eigen tekstkleuren mee.
   Dit vervangt de losse kaartjes op een lichte ondergrond. */
.band--diep{background:var(--diep);color:var(--op-diep)}
.band--diep h2,.band--diep h3{color:#fff}
.band--diep .inleiding{color:var(--op-diep)}
.band--diep .fijn,.band--diep .meta{color:var(--op-diep-stil)}

.band--accent{background:var(--accent-diep);color:rgba(255,255,255,.9)}
.band--accent h2,.band--accent h3{color:#fff}
.band--accent .inleiding{color:rgba(255,255,255,.9)}

/* --------------------------------------------------------- kop van de site */
.kop{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,244,.88);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.kop__binnen{max-width:var(--breed);margin:0 auto;padding:0 var(--rand);
  display:flex;align-items:center;gap:28px;height:72px}
@media(prefers-reduced-transparency:reduce){.kop{background:var(--papier);backdrop-filter:none}}

/* Woordmerk als opgemaakte tekst: scherp op elk scherm, geen extra request. */
.merk{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none}
.merk b{font-size:1.15rem;font-weight:800;letter-spacing:.14em;color:var(--inkt)}
.merk i{font:.66rem/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--accent-diep);
  padding:5px 9px;border-radius:var(--pil);background:var(--accent-licht)}

.menu{margin-left:auto;display:flex;align-items:center;gap:6px}
.menu a{padding:9px 14px;color:var(--inkt-dof);text-decoration:none;font-size:.95rem;
  border-radius:var(--pil);transition:color .18s,background .18s}
.menu a:hover{color:var(--inkt);background:rgba(36,24,48,.06)}
.menu .knop{margin-left:10px}
/* .menu a is specifieker dan .knop--vol; zonder deze regel staan er donkere
   letters op de donkere knop en lees je hem niet. */
.menu a.knop--vol,.menu a.knop--vol:hover{color:#fff}
.menu .knop:hover{background:var(--inkt)}

/* --------------------------------------------------------- knoppen */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--pil);border:0;cursor:pointer;
  font:600 .97rem/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;
  text-decoration:none;
  transition:background .18s var(--uit),color .18s,transform .12s var(--uit);
}
.knop--vol{background:var(--accent);color:#fff}
.knop--vol:hover{background:var(--inkt);color:#fff}
.knop--lijn{background:rgba(36,24,48,.07);color:var(--inkt)}
.knop--lijn:hover{background:rgba(36,24,48,.13);color:var(--inkt)}
/* Op een gekleurde baan draait het om: lichte knop, donkere letters. */
.knop--licht{background:#fff;color:var(--accent-diep)}
.knop--licht:hover{background:var(--accent-licht);color:var(--inkt)}
.band--diep .knop--licht{color:var(--diep-2)}
.knop:active{transform:translateY(1px) scale(.985)}

/* --------------------------------------------------------- hero */
.hero{padding:clamp(48px,7vw,84px) 0 clamp(64px,8vw,100px)}
/* Gelijke kolommen: de hero-foto ligt liggend, en in een smalle kolom wordt
   die een streepje. */
.hero__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--accent-diep)}
.hero .inleiding{font-size:1.2rem;max-width:46ch}
.hero__acties{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}

/* 3/2 ligt dicht bij de verhouding van de foto zelf (16:9), dus er gaat maar
   een randje af in plaats van een halve persoon. */
.hero__beeld{position:relative;border-radius:var(--rond);overflow:hidden;
  aspect-ratio:3/2;background:var(--lijn)}
.hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Heel lichte tint zodat de foto bij de huisstijl hoort. Geen donkere sluier:
   die maakte de gezichten modderig. */
.hero__beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(53,32,74,.16),transparent 46%)}

/* --------------------------------------------------------- clusters (wat ik doe)
   Twee tekstkolommen op de aubergine baan, gescheiden door een lijn. Geen
   kaartjes: de baan is de vorm. */
.clusters{display:grid;gap:0;grid-template-columns:1fr 1fr;margin-top:56px}
.paneel{padding:0 clamp(28px,3.6vw,52px)}
.paneel:first-child{padding-left:0}
.paneel:last-child{padding-right:0;border-left:1px solid var(--op-diep-lijn)}
.paneel>h3{margin-bottom:6px}
.paneel__lead{font-size:.97rem;color:var(--op-diep-stil);margin-bottom:30px}
.groep+.groep{margin-top:26px}
.groep__naam{font:.72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-warm);margin:0 0 12px}
.groep ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.groep li{font-size:.97rem;color:var(--op-diep);padding-left:18px;position:relative}
.groep li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--accent-warm)}

/* --------------------------------------------------------- register (voor wie)
   Een editoriale index: naam links, uitleg rechts, dikke lijn ertussen.
   Geen tegels, geen raster van gelijke blokjes. */
.register{list-style:none;margin:52px 0 0;padding:0}
.register li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);
  gap:clamp(20px,4vw,56px);padding:34px 0;border-top:2px solid var(--inkt)}
.register li:last-child{border-bottom:2px solid var(--inkt)}
.register h3{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.register p{color:var(--inkt-dof);max-width:56ch;font-size:1rem}

/* --------------------------------------------------------- stappen
   Vier kolommen. Onder elkaar met het cijfer in de kantlijn werd het een rij
   losse regels tegen de linkerrand met een leeg vlak rechts. */
.stappen{list-style:none;margin:52px 0 0;padding:0;counter-reset:stap;
  display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}
.stappen li{counter-increment:stap;padding-top:22px;border-top:1px solid var(--lijn)}
.stappen li::before{content:counter(stap,decimal-leading-zero);display:block;margin-bottom:16px;
  font:800 clamp(2rem,3.2vw,2.9rem)/.85 var(--sans);letter-spacing:-.05em;color:var(--accent)}
/* Liever een omlijnd cijfer, maar alleen waar de browser dat kan tekenen. */
@supports (-webkit-text-stroke:1px currentColor){
  .stappen li::before{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
}
.stappen h3{margin-bottom:10px;font-size:1.14rem}
.stappen p{font-size:.96rem}

/* --------------------------------------------------------- uitgelicht
   De oranje baan. Eén keer op de pagina, als hoogtepunt. */
.uitgelicht__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,5vw,72px);align-items:start}
.uitgelicht__raster h2{max-width:14ch}
.uitgelicht__onder{font-size:1.05rem;color:rgba(255,255,255,.9);max-width:40ch;margin:22px 0 0}

/* Definitielijst als tweekolomsraster: term links, waarde rechts. */
.feiten{margin:0;display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:0 24px}
.feiten dt,.feiten dd{padding:15px 0;border-top:1px solid rgba(255,255,255,.28);margin:0}
.feiten dt:first-of-type,.feiten dt:first-of-type+dd{border-top:0}
.feiten dt{font:.74rem/1.9 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.feiten dd{font-size:.99rem;color:#fff;font-weight:500}

/* --------------------------------------------------------- papieren op orde */
.papieren{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:14px 44px;margin-top:48px;list-style:none;padding:0}
.papieren li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-top:1px solid var(--lijn);font-size:.98rem;color:var(--inkt-dof)}
/* Vinkje als vorm, niet als icoonbestand. */
.papieren li::before{content:"";flex:none;width:11px;height:6px;margin-top:.55em;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg)}

/* --------------------------------------------------------- aanvraag */
.aanvraag{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,64px);align-items:start;margin-top:48px}
/* Het formulier is het enige vlak dat nog een eigen ondergrond heeft: invoer
   heeft een rustig veld nodig om op te staan. */
.formulier{background:var(--vlak);border-radius:var(--rond);padding:clamp(28px,3.4vw,44px);
  display:grid;gap:20px;grid-template-columns:1fr 1fr}
.formulier .vol{grid-column:1/-1}
.veld label{display:block;font-size:.85rem;font-weight:600;color:var(--inkt);margin-bottom:8px}
.veld input,.veld textarea,.veld select{
  width:100%;padding:14px 18px;border-radius:var(--pil);border:1px solid var(--lijn);
  background:var(--papier);color:var(--inkt);font:inherit;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.veld textarea{border-radius:18px;resize:vertical;min-height:130px}
.veld input::placeholder,.veld textarea::placeholder{color:var(--inkt-stil)}
.veld input:focus,.veld textarea:focus,.veld select:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(194,74,38,.18);
}
.veld select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.veld .toelichting{font-size:.84rem;color:var(--inkt-stil);margin:8px 0 0}

.akkoord{display:flex;gap:13px;align-items:flex-start;font-size:.92rem;color:var(--inkt-dof)}
.akkoord input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--accent)}
.verborgen{position:absolute;left:-9999px}

.melding{padding:17px 22px;border-radius:16px;margin:0 0 26px;font-size:.97rem}
.melding--goed{background:var(--accent-licht);color:var(--accent-diep);
  box-shadow:inset 0 0 0 1px #f0d3c2}
.melding--mis{background:#fdecea;color:#8f2318;box-shadow:inset 0 0 0 1px #f2cdc8}

.zijkant dl{margin:0;display:grid;gap:2px}
.zijkant dt{font:.72rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-stil);
  padding-top:18px;border-top:1px solid var(--lijn)}
.zijkant dd{margin:2px 0 18px;font-size:1.02rem;color:var(--inkt)}
.zijkant dd a{color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--accent)}
.zijkant dd a:hover{color:var(--accent-diep)}
.uitspraak{margin:34px 0 0;padding:28px;background:var(--diep);border-radius:var(--rond)}
.uitspraak p{font-size:1.1rem;color:#fff;letter-spacing:-.015em;line-height:1.4}
.uitspraak footer{margin-top:14px;font:.74rem/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-warm)}

/* --------------------------------------------------------- vragen */
.vragen{margin-top:48px;max-width:78ch}
.vragen details{border-top:1px solid var(--lijn)}
.vragen details:last-of-type{border-bottom:1px solid var(--lijn)}
.vragen summary{list-style:none;cursor:pointer;position:relative;
  padding:26px 52px 26px 0;font-size:1.12rem;font-weight:650;color:var(--inkt);
  letter-spacing:-.02em;transition:color .18s}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary:hover{color:var(--accent-diep)}
/* Plus dat een min wordt: twee lijnen, één draait weg. */
.vragen summary::before,.vragen summary::after{content:"";position:absolute;right:8px;top:50%;
  width:15px;height:1.6px;background:var(--accent);transition:transform .25s var(--uit)}
.vragen summary::after{transform:rotate(90deg)}
.vragen details[open] summary::after{transform:rotate(0)}
.vragen details>p{margin:0 0 26px;max-width:66ch;color:var(--inkt-dof)}

/* --------------------------------------------------------- slot en voet */
.slot{text-align:center}
.slot h2{max-width:22ch;margin:0 auto 22px}
.slot .inleiding{margin:0 auto}
.slot__acties{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

.voet{background:var(--diep-2);color:var(--op-diep);padding:clamp(52px,7vw,80px) 0 34px}
.voet__raster{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
.voet .merk b{color:#fff}
.voet .merk i{color:var(--accent-warm);background:rgba(255,255,255,.1)}
.voet .fijn{color:var(--op-diep-stil)}
.voet h4{color:#fff;margin:0 0 16px;font-size:.94rem;font-weight:650}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.95rem}
.voet a{color:var(--op-diep);text-decoration:none}
.voet a:hover{color:var(--accent-warm)}
.voet__slot{margin-top:52px;padding-top:24px;border-top:1px solid var(--op-diep-lijn);
  display:flex;gap:22px;flex-wrap:wrap;font:.76rem/1.6 var(--mono);letter-spacing:.06em;color:var(--op-diep-stil)}

/* --------------------------------------------------------- mobiel menu
   Zonder JavaScript: een checkbox stuurt het paneel aan. */
.menu-vink{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.menu-knop{display:none}

@media(max-width:940px){
  .hero__raster,.uitgelicht__raster,.aanvraag,.voet__raster{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr 1fr}
  .register li{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .hero__beeld{aspect-ratio:16/9;order:-1}
  /* De scheidingslijn tussen de kolommen wordt een lijn erboven. */
  .clusters{grid-template-columns:1fr;gap:40px}
  .paneel{padding:0}
  .paneel:last-child{border-left:0;border-top:1px solid var(--op-diep-lijn);padding-top:40px}
  .voet__raster{gap:36px}

  .kop__binnen{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:14px}
  .menu-knop{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:44px;height:44px;padding:0 11px;cursor:pointer;
    border-radius:var(--pil);background:rgba(36,24,48,.07)}
  .menu-knop span{display:block;height:1.6px;background:var(--inkt);transition:transform .2s,opacity .2s}
  .menu-vink:checked~.menu-knop span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .menu-vink:checked~.menu-knop span:nth-child(2){opacity:0}
  .menu-vink:checked~.menu-knop span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .menu-vink:focus-visible~.menu-knop{outline:2px solid var(--accent);outline-offset:3px}
  .menu{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:2px;margin:12px 0 6px}
  .menu-vink:checked~.menu{display:flex}
  .menu a{padding:14px 16px}
  .menu .knop{margin:10px 0 0;justify-content:center}
}

@media(max-width:640px){
  :root{--rand:20px}
  .formulier{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr;gap:20px}
  /* Term boven de waarde in plaats van ernaast: naast elkaar wordt de
     rechterkolom op een telefoon een sliert van twee woorden breed. */
  .feiten{grid-template-columns:1fr;gap:0}
  .feiten dt{padding:16px 0 2px}
  .feiten dd{border-top:0;padding-top:0}
}

/* --------------------------------------------------------- beweging
   Inhoud schuift op zijn plek zodra hij in beeld komt: dat geeft volgorde aan
   het lezen. Puur CSS, geen scroll-listener. Browsers zonder scroll-driven
   animations zetten alles gewoon meteen goed.

   Bewust alleen transform en geen opacity. De blokken op deze pagina zijn op
   een telefoon hoger dan het scherm, en dan loopt het 'entry'-bereik pas vol
   als het hele blok voorbij is. Met een fade betekent dat: half doorzichtige
   tekst die je op dat moment juist zit te lezen. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .opkomen{
      animation:opkomen linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    @keyframes opkomen{from{transform:translateY(18px)}to{transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

@media print{.kop,.voet{display:none}}