/* =====================================================================
   Exhale Performance - achtergrond: grote schuine EP-logo's, zacht
   Het officiële EP-icoon groot en schuin, als een vlak dat net iets
   lichter is dan het zwart van de pagina (#161616 op #0f0f0f). Geen
   randen of glans: op het eerste gezicht rustig zwart, bij een tweede
   blik zie je de logo's.

   Hoe het werkt
   - Eén achtergrond op <body>, in drie lagen (zie hieronder). De browser
     legt die op het canvas, onder alle inhoud: geen extra element, geen
     z-index, geen vaste laag, geen JS.
     Het scrolt mee als papier (ook veilig op iPhone).
   - Kaarten, foto's, de hero en blokken met een eigen achtergrond liggen
     erboven. Het patroon zie je dus enkel op het kale zwart.
   - De tegels bevatten het officiële icoon (assets/allin/exhale-logo-icoon-
     wit.svg): beide paden letterlijk, enkel verplaatst, gedraaid (18,4
     graden, rijst naar rechts) en gelijkmatig geschaald.
   - De tegel schaalt mee met de schermbreedte, zodat de schikking overal
     dezelfde is en geen logo de schermrand raakt.
     Desktop: zo breed als het scherm, tot 1440 px; 4 logo's per tegel,
     elk een zesde van de tegelbreedte.
     Gsm (tot 720 px): zo breed als het scherm; 2 logo's per tegel, elk
     ruim een derde van de schermbreedte.
   - Sterker of zachter: enkel de kleur van het vlak in de twee tegels
     aanpassen (#161616 nu; #111111 was amper te zien, boven #181818 wordt
     het een effect).
   - Randen: links en rechts vervaagt het patroon. Op brede schermen (vanaf
     ongeveer 1600 px) blijft het binnen de middelste 1440 px, zoals de
     inhoud.
   - "html:root body" wint van body{background:...} op elke pagina, ook
     van body.boutique op /lessen, waar dit bestand ook staat.
   - Alles behalve het patroon zelf staat binnen @media screen: afdrukken
     blijft exact zoals zonder dit bestand.
   Weghalen: de <link> naar dit bestand uit de pagina's halen.
   ===================================================================== */
html:root body{
  /* Drie lagen, van boven naar onder:
     1. een effen zwart vlak net onder het einde van de pagina (een korte
        pagina op een hoog scherm, of verend doorscrollen op een iPhone):
        onder de footer komt geen patroon meer;
     2. de rand: effen zwart aan de zijkanten, het patroon ertussen;
     3. de tegel met de logo's. */
  --ach-rand:linear-gradient(90deg,var(--bg,#0f0f0f) max(38px,calc(50% - 760px)),transparent max(64px,calc(50% - 720px)),transparent min(calc(100% - 64px),calc(50% + 720px)),var(--bg,#0f0f0f) min(calc(100% - 38px),calc(50% + 760px)));
  background-image:linear-gradient(var(--bg,#0f0f0f),var(--bg,#0f0f0f)),var(--ach-rand),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cdefs%3E%3Cg id=%22e%22%3E%3Cpath d=%22M110.4375 202.3065L134.5285 202.3065L134.5285 167.3715L110.4375 167.3715ZM189.4375 50.4325L152.0065 50.4325C129.0485 50.4325 110.4375 69.0435 110.4375 92.0015L110.4375 126.9335L134.5285 126.9335L134.5285 92.0085C134.5285 82.3535 142.3545 74.5265 152.0095 74.5265L189.4345 74.5265C199.0885 74.5265 206.9155 82.3535 206.9155 92.0085L206.9155 117.6615C206.9155 127.3135 199.0915 135.1385 189.4395 135.1385L4.5295 135.1385L4.5295 153.3845C4.5295 156.6205 7.1525 159.2445 10.3885 159.2445L189.4365 159.2325C212.3945 159.2325 231.0065 140.6205 231.0065 117.6615L231.0065 92.0015C231.0065 69.0435 212.3955 50.4325 189.4375 50.4325ZM37.5295 167.3845L37.5295 173.9735C37.5295 175.5915 38.8415 176.9015 40.4575 176.9015L65.0805 176.9025C66.6975 176.9025 68.0085 175.5915 68.0085 173.9735L68.0075 167.3845ZM101.0075 28.0465C101.0075 24.8105 98.3845 22.1875 95.1485 22.1875L10.3885 22.1875C7.1525 22.1875 4.5295 24.8105 4.5295 28.0465L4.5295 46.2925L101.0075 46.2925ZM68.0085 7.4585C68.0085 5.8405 66.6965 4.5295 65.0795 4.5295L40.4575 4.5295C38.8405 4.5295 37.5295 5.8405 37.5295 7.4585L37.5295 14.0475L68.0085 14.0475Z%22/%3E%3Cpath d=%22M80.8185 78.6665L4.5295 78.6665L4.5295 102.7625L80.8185 102.7625Z%22/%3E%3C/g%3E%3C/defs%3E%3Cuse href=%22%23e%22 transform=%22translate(316.800 210.000) rotate(-18.4349) scale(1.059710) translate(-117.7680 -103.4180)%22 fill=%22%23161616%22/%3E%3Cuse href=%22%23e%22 transform=%22translate(892.800 210.000) rotate(-18.4349) scale(1.059710) translate(-117.7680 -103.4180)%22 fill=%22%23161616%22/%3E%3Cuse href=%22%23e%22 transform=%22translate(604.800 630.000) rotate(-18.4349) scale(1.059710) translate(-117.7680 -103.4180)%22 fill=%22%23161616%22/%3E%3Cuse href=%22%23e%22 transform=%22translate(1180.800 630.000) rotate(-18.4349) scale(1.059710) translate(-117.7680 -103.4180)%22 fill=%22%23161616%22/%3E%3C/svg%3E");
  background-size:100% 100vh,100% 100%,100% auto;
  background-size:100% 100vh,100% 100%,min(100%,1440px) auto;
  background-repeat:no-repeat,repeat,repeat;
  background-attachment:scroll,scroll,scroll;
  /* laag 1 net onder de pagina; de tegel gecentreerd op een hele pixel */
  background-position:0 calc(100% + 100vh),0 0,50% 0;
  background-position:0 calc(100% + 100vh),0 0,round(50%,1px) 0;
}
@media (max-width:720px){
  html:root body{
    --ach-rand:linear-gradient(90deg,var(--bg,#0f0f0f),transparent 28px,transparent calc(100% - 28px),var(--bg,#0f0f0f));
    background-image:linear-gradient(var(--bg,#0f0f0f),var(--bg,#0f0f0f)),var(--ach-rand),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22520%22 viewBox=%220 0 400 520%22%3E%3Cdefs%3E%3Cg id=%22e%22%3E%3Cpath d=%22M110.4375 202.3065L134.5285 202.3065L134.5285 167.3715L110.4375 167.3715ZM189.4375 50.4325L152.0065 50.4325C129.0485 50.4325 110.4375 69.0435 110.4375 92.0015L110.4375 126.9335L134.5285 126.9335L134.5285 92.0085C134.5285 82.3535 142.3545 74.5265 152.0095 74.5265L189.4345 74.5265C199.0885 74.5265 206.9155 82.3535 206.9155 92.0085L206.9155 117.6615C206.9155 127.3135 199.0915 135.1385 189.4395 135.1385L4.5295 135.1385L4.5295 153.3845C4.5295 156.6205 7.1525 159.2445 10.3885 159.2445L189.4365 159.2325C212.3945 159.2325 231.0065 140.6205 231.0065 117.6615L231.0065 92.0015C231.0065 69.0435 212.3955 50.4325 189.4375 50.4325ZM37.5295 167.3845L37.5295 173.9735C37.5295 175.5915 38.8415 176.9015 40.4575 176.9015L65.0805 176.9025C66.6975 176.9025 68.0085 175.5915 68.0085 173.9735L68.0075 167.3845ZM101.0075 28.0465C101.0075 24.8105 98.3845 22.1875 95.1485 22.1875L10.3885 22.1875C7.1525 22.1875 4.5295 24.8105 4.5295 28.0465L4.5295 46.2925L101.0075 46.2925ZM68.0085 7.4585C68.0085 5.8405 66.6965 4.5295 65.0795 4.5295L40.4575 4.5295C38.8405 4.5295 37.5295 5.8405 37.5295 7.4585L37.5295 14.0475L68.0085 14.0475Z%22/%3E%3Cpath d=%22M80.8185 78.6665L4.5295 78.6665L4.5295 102.7625L80.8185 102.7625Z%22/%3E%3C/g%3E%3C/defs%3E%3Cuse href=%22%23e%22 transform=%22translate(136.000 130.000) rotate(-18.4349) scale(0.662319) translate(-117.7680 -103.4180)%22 fill=%22%23161616%22/%3E%3Cuse href=%22%23e%22 transform=%22translate(264.000 390.000) rotate(-18.4349) scale(0.662319) translate(-117.7680 -103.4180)%22 fill=%22%23161616%22/%3E%3C/svg%3E");
    background-size:100% 100vh,100% 100%,100% auto;
  }
}

@media screen{
  /* Rustige zones: hier blijft het effen zwart, het patroon stopt op hun rand.
     - De footer met het echte logo en de wettelijke regel.
     - Waar je leest, kiest of invult: prijzen (ook het onderschrift), uren,
       het lesrooster en de lessenlijst op /lessen, de cookietabel, het
       herroepingsformulier en de lijsten met vragen.
     - De smalle spleten tussen kaarten en foto's (zonekaarten, foto's,
       reviews, abonnementen), zodat daar geen stukjes logo staan. */
  html:root body > footer#contact,
  html:root #hf,
  html:root #list,
  html:root #weekrooster table,
  html:root :is(.ptable,.ptable caption,table.hours,.r4-ck,.faq,.qa-list),
  html:root :is(.grid3,.vgrid,.kijk-grid,.rv-track,.pr-row){background-color:var(--bg,#0f0f0f)}
  /* een fotokader is donkergrijs zolang de foto laadt, zoals de zonefoto's */
  html:root .pg-photo{background-color:#141414}

  /* Omlijnde knoppen en labels op het kale zwart: nooit een logo binnen een
     knop. Gevuld met een schaduw binnenin in plaats van een achtergrond, zodat
     de rand en de hoeken exact blijven zoals voorheen. Een witte knop die bij
     hover leeg wordt, krijgt daarbinnen ook effen zwart. */
  html:root .hf-model,
  html:root :is(.pg-cta,.nf-go,.coaching .foot) > .btn:not(.btn-solid):not(:hover),
  html:root :is(.pg-cta,.nf-go,.coaching .foot) > .btn-solid:hover,
  html:root :is(.rv-nav button,.pg-toc a):not(:hover),
  html:root .cp .creds span{box-shadow:inset 0 0 0 2000px var(--bg,#0f0f0f)}
  /* die vulling komt pas als de kleurovergang van de site (0,22 s) klaar is */
  html:root :is(.pg-cta,.nf-go,.coaching .foot) > .btn:not(.btn-solid):not(:hover),
  html:root :is(.pg-cta,.nf-go,.coaching .foot) > .btn-solid:hover{transition:background .22s,color .22s,border-color .22s,box-shadow 0s .22s}
  html:root .rv-nav button:not(:hover){transition:background .22s,color .22s,box-shadow 0s .22s}

  /* De partnerlogo's: een zachte effen strook achter de rij (onder alle
     inhoud), zodat onze logo's nooit tussen of achter andere merken staan. */
  html:root #partners{position:relative}
  html:root #partners::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-44px;bottom:-44px;pointer-events:none;background:linear-gradient(transparent,var(--bg,#0f0f0f) 44px,var(--bg,#0f0f0f) calc(100% - 44px),transparent)}

  /* de urentabel krijgt bovenaan dezelfde fijne lijn als tussen de rijen */
  html:root table.hours{box-shadow:inset 0 1px 0 var(--line,rgba(245,244,241,.15))}

  /* Op gsm blijven ook de strook onder de footer (boven de knoppenbalk) en
     de spleten tussen de gestapelde 404-knoppen effen. */
  @media (max-width:720px){
    html:root body > footer#contact{box-shadow:0 72px 0 var(--bg,#0f0f0f)}
    html:root .nf-go{background-color:var(--bg,#0f0f0f)}
  }

  /* Het coachingblok op de homepagina had al exact dezelfde kleur als de pagina
     en onderbrak zo het patroon; transparant geeft hetzelfde zwart. Zijn kleine
     nummers 01/02/03 worden iets lichter grijs, zodat ze ook boven een logo
     ruim leesbaar blijven (contrast boven 4,5:1). */
  html:root section.coaching{background-color:transparent}
  html:root .coaching .n{color:#8e8b85}
}

/* Afwerking (7/11/2026, na nacontrole op gsm, tablet en laptop): waar een logo
   langs een onzichtbare rand werd afgesneden of als dun strookje tussen twee
   kaarten bleef staan. Enkel vullingen in het zwart van de pagina en de fijne
   lijn die de urentabel al heeft: de opmaak verandert niet. */
@media screen{
  /* lesrooster en cookietabel: bovenaan dezelfde fijne lijn als de urentabel */
  html:root #weekrooster table{box-shadow:inset 0 1px 0 var(--line,rgba(245,244,241,.15))}
  html:root table.r4-ck{box-shadow:inset 0 1px 0 var(--line,rgba(245,244,241,.15))}
  /* formulier en prijsonderschrift: het patroon vervaagt erboven, geen harde snede */
  html:root :is(#hf,.ptable caption){box-shadow:0 -14px 14px var(--bg,#0f0f0f)}
  /* reviews: effen enkel waar de kaarten staan; lessenlijst op /lessen; coachkaarten */
  html:root .rv-track{background-clip:content-box}
  html:root .lis{background-color:var(--bg,#0f0f0f)}
  html:root .team{background-color:var(--bg,#0f0f0f);background-clip:content-box}
  /* contact: de strook tussen de adreskaarten en de foto's */
  html:root .pg-cards + .pg-photos{box-shadow:0 -18px 0 var(--bg,#0f0f0f)}
  @media (max-width:720px){
    /* gsm: gestapelde kaarten en foto's op contact, de knoppen onder coaching */
    html:root :is(.pg-cards,.pg-photos),
    html:root .coaching .foot{background-color:var(--bg,#0f0f0f)}
    /* /lessen, eerste scherm: de stroken boven en onder de banner en boven de lijst */
    html:root body.boutique .banner{box-shadow:0 -20px 0 var(--bg,#0f0f0f),0 17px 0 var(--bg,#0f0f0f)}
    html:root body.boutique #list{box-shadow:0 -14px 0 var(--bg,#0f0f0f)}
    /* twee knoppen naast elkaar: de spleet ertussen (de vulling van de knop blijft) */
    html:root .pg-cta > .btn-solid:first-child + .btn:not(.btn-solid):not(:hover){box-shadow:inset 0 0 0 2000px var(--bg,#0f0f0f),-14px 0 0 var(--bg,#0f0f0f)}
  }
  /* twee knoppen onder elkaar: de spleet onder de witte knop, ook bij hover.
     De lege schaduw binnenin houdt de kleurovergang van 0,22 s van de site. */
  @media (max-width:470px){
    html:root .pg-cta > .btn-solid:first-child:not(:hover){box-shadow:inset 0 0 0 0 var(--bg,#0f0f0f),0 15px 0 var(--bg,#0f0f0f)}
    html:root .pg-cta > .btn-solid:first-child:hover{box-shadow:inset 0 0 0 2000px var(--bg,#0f0f0f),0 15px 0 var(--bg,#0f0f0f)}
  }
  @media (min-width:721px){
    /* vragenlijsten (max. 860 px): het logo ernaast vervaagt naar de lijst toe */
    html:root .qa-list{box-shadow:24px 0 48px var(--bg,#0f0f0f)}
    /* herroepingsformulier: zacht aan alle kanten */
    html:root #hf{box-shadow:0 0 40px 20px var(--bg,#0f0f0f)}
    /* urentabel en cookietabel: lijn bovenaan en een zachte rechterrand */
    html:root table.hours,
    html:root table.r4-ck{box-shadow:inset 0 1px 0 var(--line,rgba(245,244,241,.15)),16px 0 32px var(--bg,#0f0f0f)}
    /* contact: tussen de twee adreskaarten en de twee foto's, en naast en onder de
       eerste contactkaart (dat raster zelf blijft open: de derde kaart staat alleen) */
    html:root #adressen .pg-cards,
    html:root .pg-cards + .pg-photos{background-color:var(--bg,#0f0f0f)}
    html:root #contact .pg-card:first-child{box-shadow:14px 0 0 var(--bg,#0f0f0f),0 14px 0 var(--bg,#0f0f0f)}
    /* /lessen, eerste scherm: de strook tussen de banner en de dagbalk */
    html:root body.boutique .banner{box-shadow:0 23px 0 var(--bg,#0f0f0f)}
  }
}

/* Hoog contrast (Windows), "meer contrast" (macOS/iOS) en afdrukken: geen patroon */
@media (forced-colors:active),(prefers-contrast:more),print{
  html:root body{background-image:none}
}