/* =========================================================
     Loopbaanhypnose — stijlblad
     Vormgeving: wit als basis, kleur in losse vlakken met lucht
     eromheen. Sinds 26 september 2026 kloppen de klassenamen weer
     met wat ze doen: een vlak is "open" (papier), "teal" of
     "rustig" (warm papier). De oude namen staan onderaan als
     vertaling, alleen nog voor de privacyverklaring en de
     algemene voorwaarden, die nog niet opnieuw zijn opgebouwd.
     ========================================================= */

  :root{
    --papier:#FBF8F4;        /* schoon warm wit — de grond van de site */
    --papier-warm:#F7F2E9;   /* iets warmer vlak, voor rustige blokken */
    --inkt:#322015;          /* het bruin, als tekstkleur */
    --bruin:#372215;         /* alleen nog de voet */

    --teal:#157A89;          /* het petrol, opgeschoond en lichter */
    --teal-licht:#E3F1F4;
    --oranje:#EE6C2B;        /* merkkleur, grafisch gebruik */
    --oranje-diep:#AA4418;   /* knoppen met witte tekst, tekst en links op licht */
    --oranje-licht:#FFBF75;  /* accenttekst op teal en bruin */
    --wit:#FFFFFF;

    --lucht:84px;
    --bocht:26px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--papier);color:var(--inkt);font-family:'Karla',Verdana,sans-serif;font-size:18px;line-height:1.78;overflow-x:hidden;}
  h1,h2,h3{font-family:'Bricolage Grotesque','Karla',sans-serif;line-height:1.14;color:var(--inkt);}
  .kader{max-width:940px;margin:0 auto;padding:0 32px;position:relative;}
  .kader.breed{max-width:1120px;}
  a{color:var(--oranje-diep);font-weight:700;}
  main:focus{outline:none;}

  /* Overslaan-link: onzichtbaar tot iemand er met de tabtoets op landt.
     Zo hoeft een toetsenbordgebruiker niet eerst door het hele menu. */
  .overslaan{position:absolute;left:-9999px;top:0;z-index:100;background:var(--oranje-diep);
    color:var(--wit);padding:14px 22px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none;}
  .overslaan:focus{left:0;}

  /* ---------------------------------------------------------- kop en menu */
  header.site{background:var(--papier);border-bottom:1px solid #EDE5D9;position:sticky;top:0;z-index:40;}
  header.site .kader{display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:20px;max-width:1120px;}
  .merk{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;color:var(--teal);text-decoration:none;}
  nav ul{display:flex;gap:6px;list-style:none;font-size:15px;flex-wrap:wrap;}
  nav a{color:var(--inkt);padding:7px 14px;border-radius:999px;text-decoration:none;font-weight:400;display:inline-block;}
  nav a.actief{background:var(--oranje-diep);color:var(--wit);font-weight:700;}
  nav a:hover{background:rgba(50,32,21,.07);}

  /* Het aanvinkvakje stuurt het uitklapmenu aan. Het staat buiten beeld
     maar blijft bereikbaar met de tabtoets, anders kan iemand zonder muis
     het menu niet openen. De knop ernaast krijgt de zichtbare focusrand. */
  .menuschakelaar{position:absolute;opacity:0;width:1px;height:1px;}
  .menuknop{display:none;}
  .menuschakelaar:focus-visible + .menuknop{outline:3px solid var(--oranje-diep);outline-offset:3px;}

  /* ---------------------------------------------------------- bouwstenen */
  .vlak{padding:var(--lucht) 0;}
  .vlak.open{background:none;}
  /* twee lichte blokken achter elkaar delen hun witruimte, anders
     wordt het gat tussen twee alinea's twee keer zo groot als bedoeld */
  .vlak.open + .vlak.open{padding-top:0;}
  .vlak.teal,.vlak.rustig{
    width:calc(100% - 48px);max-width:1104px;margin:34px auto;
    border-radius:var(--bocht);padding:64px 0;
  }
  .vlak.teal{background:var(--teal);color:var(--wit);}
  .vlak.teal h1,.vlak.teal h2,.vlak.teal h3{color:var(--wit);}
  .vlak.teal a{color:var(--oranje-licht);}
  .vlak.teal .accent{color:var(--oranje-licht);}
  .vlak.rustig{background:var(--papier-warm);}

  /* de hero is altijd licht; de kleur zit in de knop en in de L */
  #kop{padding:88px 0 80px;position:relative;overflow:hidden;}
  #kop h1{font-size:60px;font-weight:800;max-width:820px;letter-spacing:-.012em;}
  #kop .accent{color:var(--oranje-diep);font-style:italic;}
  #kop .sub{font-size:21px;margin:30px 0 42px;max-width:620px;}
  #kop .terug{margin-bottom:18px;}
  #kop .dop{margin-bottom:18px;}
  #kop h1,#kop .sub,#kop .knoppen{position:relative;z-index:1;}

  /* ---------------------------------------------------------- knoppen */
  .knoppen{display:flex;gap:16px;flex-wrap:wrap;}
  /* De knop kantelt bij aanwijzen: hij scharniert op zijn linkerkant en
     de rechterkant komt omhoog, zoals het olifantenpaadje dat naar de
     bestemming stijgt. Geen sprongetje omhoog, maar dezelfde beweging
     als in het logo. */
  .knop{font-family:'Karla',sans-serif;font-size:17px;font-weight:700;padding:16px 32px;border-radius:999px;
    text-decoration:none;display:inline-block;border:none;
    transform-origin:0% 60%;transition:transform .22s cubic-bezier(.22,.7,.3,1), box-shadow .22s ease;}
  .knop:hover,.knop:focus-visible{transform:rotate(-1.6deg);}
  .knop.vuur:hover,.knop.vuur:focus-visible{box-shadow:0 10px 24px rgba(170,68,24,.28);}
  .knop.vuur{background:var(--oranje-diep);color:var(--wit);box-shadow:0 6px 18px rgba(170,68,24,.22);}
  .knop.omtrek{background:none;color:var(--teal);border:2.5px solid var(--teal);}
  .vlak.teal .knop.omtrek{color:var(--wit);border-color:var(--wit);}
  .vlak.teal .knop.vuur{background:var(--wit);color:var(--teal);box-shadow:none;}

  /* ---------------------------------------------------------- leeskolom */
  .lichtpaneel{max-width:680px;}
  .lichtpaneel h2{color:var(--teal);font-size:31px;font-weight:800;margin-bottom:18px;}
  .vlak.teal .lichtpaneel h2{color:var(--wit);}
  .lichtpaneel h2 + p{margin-top:0;}
  .lichtpaneel p{margin-bottom:20px;}
  .lichtpaneel p:last-child{margin-bottom:0;}
  .lichtpaneel h2:not(:first-child){margin-top:40px;}
  .lichtpaneel a{text-decoration:underline;text-underline-offset:3px;}
  .bron{font-size:15px;color:#6f6055;line-height:1.6;margin-bottom:10px;}
  sup a{text-decoration:none;font-weight:700;padding:0 2px;}

  .schreeuw{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:42px;line-height:1.16;max-width:780px;}
  .cursiefblok{font-style:italic;font-weight:600;font-size:23px;line-height:1.6;max-width:720px;}

  /* ---------------------------------------------------------- kaarten */
  .kaarten{display:flex;gap:26px;flex-wrap:wrap;}
  .kaart{flex:1 1 240px;border-radius:20px;padding:34px 30px;box-shadow:0 6px 20px rgba(50,32,21,.07);
    background:var(--teal);color:var(--wit);}
  .kaart h3{font-size:22px;font-weight:800;margin:14px 0 10px;color:var(--wit);}
  .kaart h3.prijskop{font-size:33px;letter-spacing:-.015em;margin:16px 0 14px;}
  .kaart p{font-size:15.5px;line-height:1.65;margin-bottom:12px;}
  .kaart p:last-child{margin-bottom:0;}
  .kaart a{color:var(--wit);text-decoration:underline;text-underline-offset:3px;}
  .kaart .dop{background:var(--wit);color:var(--teal);}
  .kaart:nth-child(even){background:var(--teal-licht);color:var(--inkt);}
  .kaart:nth-child(even) h3{color:var(--teal);}
  .kaart:nth-child(even) a{color:var(--oranje-diep);}
  .kaart:nth-child(even) .dop{background:var(--oranje-diep);color:var(--wit);}
  .kaart .knoppen{margin-top:18px;}
  .kaart .knop.vuur{background:var(--wit);color:var(--teal);box-shadow:none;font-size:15px;padding:13px 24px;}
  .kaart:nth-child(even) .knop.vuur{background:var(--oranje-diep);color:var(--wit);}

  .dop{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
    font-weight:700;display:inline-block;padding:6px 15px;border-radius:999px;background:var(--oranje-diep);color:var(--wit);}
  .terug a{color:var(--oranje-diep);font-weight:700;text-decoration:none;font-size:15.5px;}

  /* ---------------------------------------------------------- prijs en opsomming */
  .prijs{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:92px;color:var(--oranje-diep);line-height:1;letter-spacing:-.02em;}
  .nee{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:70px;color:var(--oranje-diep);line-height:1;}
  .knipoogtekst{color:var(--oranje-diep);font-style:italic;font-weight:600;}

  .punten{list-style:none;margin:0;max-width:680px;}
  .punten li{position:relative;padding-left:32px;margin-bottom:16px;}
  .punten li:last-child{margin-bottom:0;}
  .punten li::before{content:"";position:absolute;left:3px;top:.62em;width:11px;height:11px;border-radius:50%;background:var(--oranje-diep);}
  .vlak.teal .punten li::before,.kaart .punten li::before{background:var(--oranje-licht);}
  .punten.groot li{font-size:21px;line-height:1.6;margin-bottom:20px;padding-left:36px;}
  .punten.groot li::before{top:.58em;width:13px;height:13px;left:2px;}

  /* ---------------------------------------------------------- voet */
  footer.site{background:var(--bruin);color:#d3c3b1;padding:48px 0;font-size:14px;margin-top:40px;}
  footer.site a{color:var(--oranje-licht);}
  footer.site svg{display:block;margin-bottom:14px;}

  a:focus-visible,button:focus-visible,.knop:focus-visible,label:focus-visible{
    outline:3px solid var(--oranje-diep);outline-offset:3px;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .knop:hover,.knop:focus-visible{transform:none;}
  }

  /* ---------------------------------------------------------- de L in de hero
     Eén getal regelt hoe diep de L onder de zin hangt: --zak.
     De lijn, het eindpunt met de rimpeling en de knoppen eronder
     schuiven allemaal mee. */
  #kop{--zak:84px;}
  .heroL{position:relative;}
  .heroL > svg{position:absolute;left:0;width:100%;height:200px;pointer-events:none;bottom:calc(-1 * var(--zak));}
  .heroL > span{position:absolute;left:95%;bottom:calc(168px - var(--zak));border-radius:50%;}
  .heroL .rimpel{border:1px solid var(--teal);}
  .heroL .r1{width:96px;height:93px;transform:translate(calc(-50% - 4px),calc(50% + 2px));opacity:.10;filter:blur(.8px);}
  .heroL .r2{width:72px;height:70px;transform:translate(calc(-50% + 2px),calc(50% - 1px));opacity:.20;border-width:1.2px;filter:blur(.7px);}
  .heroL .r3{width:48px;height:47px;transform:translate(calc(-50% - 3px),calc(50% + 1px));opacity:.34;border-width:1.4px;filter:blur(.5px);}
  .heroL .r4{width:30px;height:29px;transform:translate(calc(-50% + 1px),50%);opacity:.52;border-width:1.6px;filter:blur(.4px);}
  .heroL .stip{width:15px;height:15px;transform:translate(-50%,50%);background:#D85F22;}
  .heroL .kern{width:5px;height:5px;transform:translate(-50%,50%);background:var(--wit);}
  .heroL + .knoppen{margin-top:calc(var(--zak) + 4px);}

  /* ---------------------------------------------------------- mobiel */
  @media (max-width:700px){
    :root{--lucht:56px;--bocht:20px;}
    .kader{padding:0 22px;}
    #kop{padding:56px 0 48px;}
    #kop h1{font-size:34px;}
    main h1{font-size:34px;}
    .schreeuw{font-size:27px;} .prijs{font-size:56px;} .nee{font-size:46px;}
    .vlak.teal,.vlak.rustig{width:calc(100% - 28px);margin:22px auto;padding:44px 0;}
    .punten.groot li{font-size:18.5px;padding-left:30px;}
    .punten.groot li::before{width:11px;height:11px;left:1px;}
    .lichtpaneel h2{font-size:26px;}

    /* het menu klapt uit onder een knop */
    header.site .kader{position:relative;}
    .menuknop{display:flex;align-items:center;gap:9px;font-family:'Karla',sans-serif;font-size:15px;font-weight:700;
      color:var(--teal);background:none;border:2px solid var(--teal);border-radius:999px;padding:8px 16px;cursor:pointer;}
    .menuknop .streepjes{display:inline-flex;flex-direction:column;gap:3.5px;}
    .menuknop .streepjes i{display:block;width:17px;height:2.4px;background:var(--teal);border-radius:2px;}
    nav{position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid #EDE5D9;
      box-shadow:0 12px 26px rgba(50,32,21,.10);padding:8px 22px 18px;display:none;}
    .menuschakelaar:checked ~ nav{display:block;}
    nav ul{flex-direction:column;gap:0;}
    nav a{display:block;padding:13px 4px;border-bottom:1px solid #F0E9DD;border-radius:0;font-size:16.5px;}
    nav a.actief{background:none;color:var(--oranje-diep);font-weight:700;}
    nav li:last-child a{border-bottom:none;}

    .heroL{display:flex;flex-direction:column;}
    .heroL .sub{order:1;margin-bottom:0;}
    .heroL svg{position:static;order:2;width:100%;height:130px;margin-top:-8px;margin-bottom:24px;}
    .heroL > span{display:none;}
    .heroL + .knoppen{margin-top:0;}
  }

  /* ---------------------------------------------------------- oude namen
     Alleen nog in gebruik door privacyverklaring.html en
     algemene-voorwaarden.html, die nog hun oude opbouw hebben.
     Kunnen weg zodra die twee pagina's opnieuw zijn opgebouwd. */
  .vlak.bruin{background:none;}
  .vlak.petrol,.vlak.kobalt{width:calc(100% - 48px);max-width:1104px;margin:34px auto;border-radius:var(--bocht);
    padding:64px 0;background:var(--teal);color:var(--wit);}
  .vlak.rood,.vlak.cognac{width:calc(100% - 48px);max-width:1104px;margin:34px auto;border-radius:var(--bocht);
    padding:64px 0;background:var(--papier-warm);}
  .vlak.petrol h1,.vlak.petrol h2,.vlak.kobalt h1,.vlak.kobalt h2{color:var(--wit);}
  .paneelwrap{padding:var(--lucht) 0;}

  /* ---------------------------------------------------------- beeld
     Twee maten. In de leeskolom is een foto even breed als de tekst en
     hoort hij bij de alinea ernaast. Als vlak krijgt hij dezelfde breedte
     als de teal blokken en wordt hij een gebeurtenis in plaats van een
     illustratie. Het onderschrift staat altijd linksonder. */
  .beeld{margin:0 0 30px;}
  .beeld img{width:100%;height:auto;display:block;border-radius:var(--bocht);}
  .beeld figcaption{font-size:15px;line-height:1.55;color:#6f6055;margin-top:12px;}
  .vlak.teal .beeld figcaption{color:#DCEDF0;}
  .beeldvlak{width:calc(100% - 48px);max-width:1104px;margin:34px auto;}
  .beeldvlak img{width:100%;height:auto;display:block;border-radius:var(--bocht);}
  .beeldvlak figcaption{font-size:15px;line-height:1.55;color:#6f6055;margin:12px 0 0 4px;max-width:620px;}

  /* het portret naast de kop op Over mij */
  #kop.metfoto .kader{display:flex;gap:56px;align-items:flex-start;}
  #kop.metfoto .tekst{flex:1 1 auto;min-width:0;}
  #kop.metfoto .portret{flex:0 0 420px;margin:0;}
  #kop.metfoto .portret img{width:100%;height:auto;display:block;border-radius:var(--bocht);}

  footer.site .fotocredit{margin-top:8px;opacity:.85;}

  @media (max-width:700px){
    #kop.metfoto .kader{flex-direction:column;gap:30px;}
    #kop.metfoto .portret{flex:0 0 auto;width:100%;max-width:340px;}
    .beeldvlak{width:calc(100% - 28px);margin:22px auto;}
  }

  /* de artikellijst in een kennisbankkaart: elke link op een eigen regel */
  .kaart .artlijst{margin-top:14px;}
  .kaart .artlijst a{display:block;margin-bottom:9px;}
  .kaart .artlijst a:last-child{margin-bottom:0;}

  /* ---------------------------------------------------------- foto naast een vlak
     Een staande foto en een gekleurd blok naast elkaar, even hoog.
     De foto vult zijn kolom met object-fit; het onderschrift staat eronder. */
  .duo{display:flex;gap:26px;align-items:stretch;width:calc(100% - 48px);max-width:1104px;margin:34px auto;}
  /* de staande foto bepaalt de hoogte van de rij; het vlak ernaast rekt mee
     en zet zijn tekst verticaal in het midden, anders blijft er teal over */
  .duo > .vlak{width:auto;max-width:none;margin:0;flex:1 1 440px;padding:44px 0;
    display:flex;align-items:center;}
  .duo > .vlak .kader{max-width:none;padding:0 44px;width:100%;}
  .duo > .vlak .lichtpaneel{max-width:none;}
  .duo .beeldnaast{flex:0 0 300px;margin:0;}
  .duo .beeldnaast img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;
    border-radius:var(--bocht);display:block;}
  .duo .beeldnaast figcaption{font-size:15px;line-height:1.55;color:#6f6055;margin-top:12px;}
  @media (max-width:820px){
    .duo{flex-direction:column;width:calc(100% - 28px);gap:18px;margin:22px auto;}
    .duo .beeldnaast{flex:0 0 auto;}
    .duo .beeldnaast img{max-height:430px;}
    .duo > .vlak{padding:44px 0;}
    .duo > .vlak .kader{padding:0 26px;}
  }