/* Het menu: doorzichtig boven de hero, dicht na het scrollen; panelen met links de pagina's en rechts één beeld;
   op de telefoon een schermvullend vel. */
.panel[hidden], .sheet[hidden] { display: none !important; }
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: transparent; border: 1px solid transparent; border-radius: 0; margin-inline: auto; max-width: none; }
html.js .bar { transition: background .35s var(--ease), border-color .35s var(--ease), top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), border-radius .35s var(--ease), max-width .35s var(--ease); }
/* Na het scrollen zweeft de balk los van de rand (Oura): smaller, ronde hoeken, vervaagde achtergrond */
.bar.floating { top: 12px; left: var(--gutter); right: var(--gutter); max-width: var(--content); border-radius: var(--s3); background: rgb(var(--bg-rgb) / 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: var(--line-2); box-shadow: 0 12px 40px rgb(var(--shadow-rgb) / calc(0.35 * var(--sh))); }
.bar.floating > .wrap { width: 100%; padding: 0 var(--s2) 0 var(--s3); height: 68px; }
.bar.floating .panel { top: calc(68px + 8px); }
html:not(.js) .bar { background: rgb(var(--bg-rgb) / 0.88); border-bottom-color: var(--line); }
.bar.open:not(.floating) { background: rgb(var(--bg-rgb) / 0.96); border-bottom-color: var(--line); }
.bar > .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.bar .brand img { height: 32px; width: auto; display: block; }
.menu { display: flex; align-items: center; gap: var(--s3); }
.menu .items { display: flex; align-items: center; gap: var(--s3); }
.menu .items > li > a, .menu .items > li > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; font-size: var(--t4); font-weight: 500; color: var(--muted); transition: color .2s; }
.menu .items > li > a:hover, .menu .items > li > button:hover, .menu .items > li > button[aria-expanded="true"], .menu .items > li[aria-current="true"] > a, .menu .items > li[aria-current="true"] > button { color: var(--off); }
.menu .items > li.alt > button, .menu .items > li.alt > a { color: var(--accent-hover); }
.menu .chev { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.menu button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu .login { font-size: var(--t4); color: var(--muted); }
.menu .login:hover { color: var(--off); }
.panel { position: absolute; left: 0; right: 0; top: 72px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--s3); box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / calc(0.45 * var(--sh))); }
.panel > .wrap { padding-inline: var(--s4); width: auto; }
.scrim { position: fixed; inset: 0; z-index: 29; background: rgb(var(--bg-rgb) / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
html.panel-open .scrim { opacity: 1; pointer-events: auto; }
.panel > .wrap { display: grid; grid-template-columns: 1fr 300px; gap: var(--s5); padding: var(--s4); align-items: start; }
.panel .links { display: grid; gap: var(--s1); }
.panel .links.two { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
.panel .links a { display: grid; gap: 2px; padding: var(--s2) var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: var(--s2); transition: background .2s; }
.panel .links a:hover, .panel .links a:focus-visible { background: rgb(var(--off-rgb) / 0.06); }
.panel .links b { font-family: var(--serif); font-weight: 400; font-size: var(--t3); color: var(--off); }
.panel .links span { font-size: var(--t4); color: var(--muted); }
.panel .visual { position: relative; display: block; aspect-ratio: 300 / 220; border-radius: var(--s2); overflow: hidden; background: #0a2a0a; }
.panel .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 50%, rgb(var(--bg-rgb) / 0.7) 100%); }
.panel .visual > span:last-child { position: absolute; left: var(--s2); bottom: var(--s2); z-index: 1; font-family: var(--serif); font-size: var(--t3); color: var(--off); }
.panel .visual.slot .note { z-index: 1; }
html.js .panel { opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
html.js .panel.in { opacity: 1; transform: none; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; color: var(--off); place-items: center; }
.burger svg { width: 22px; height: 22px; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.sheet-top img { height: 24px; width: auto; display: block; }
.sheet .close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--off); }
.sheet .close svg { width: 22px; height: 22px; }
.sheet-body { overflow: auto; padding: var(--s3) 0; display: grid; align-content: start; }
.sheet-body details { border-top: 1px solid var(--line); }
.sheet-body summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--s2) 0; font-family: var(--serif); font-size: 30px; color: var(--off); }
.sheet-body summary::-webkit-details-marker { display: none; }
.sheet-body details.alt summary { color: var(--accent-hover); }
.sheet-body .chev { width: 18px; height: 18px; color: var(--accent-text); transition: transform .25s var(--ease); }
.sheet-body details[open] .chev { transform: rotate(180deg); }
.sheet-body details ul { padding: 0 0 var(--s2); display: grid; gap: var(--s1); }
.sheet-body details ul a { display: block; padding: var(--s1) 0; font-size: var(--t3); color: var(--muted); }
.sheet-body .direct { display: block; padding: var(--s2) 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 30px; color: var(--off); }
.sheet-body .login { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t4); color: var(--muted); width: 100%; }
.sheet-body .login svg { width: 14px; height: 14px; }
.sheet-foot { padding: var(--s2) 0 max(var(--s3), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet-foot .btn { width: 100%; }
html.menu-open { overflow: hidden; }
@media (max-width: 999px) {
  .menu { display: none; }
  .burger { display: grid; }
  .bar > .wrap { height: 64px; }
  .sheet-top { height: 64px; }
}
/* De pagina begint onder de balk; de hero loopt erachter door */
main { padding-top: 72px; }
main > .hero:first-child { margin-top: -72px; padding-top: 72px; }
main > .hero:first-child .hero-media { top: 0; }
@media (max-width: 999px) { main { padding-top: 64px; } main > .hero:first-child { margin-top: -64px; padding-top: 0; } main > .hero:first-child .hero-media { margin-top: 0; } }
/* Op de telefoon blijft de balk dicht: de foto loopt eronder door, het logo blijft leesbaar */
@media (max-width: 999px) { .bar:not(.floating) { background: rgb(var(--bg-rgb) / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } .bar.floating > .wrap { height: 56px; padding: 0 var(--s2) 0 var(--s3); } }
/* Korte hero zonder beeld begint onder de balk */
main > .hero.slim:first-child { padding-top: calc(72px + var(--s6)); }
@media (max-width: 999px) { main > .hero.slim:first-child { margin-top: 0; padding-top: var(--s5); } }

/* Vloeiende overgang van de balk (admin, 12 oktober laat, na Ryan: "haperig als je terug gaat"). De oude overgang sprong, omdat
   max-width van "none" naar een maat niet kan overvloeien en de inhoud versprong. Nu blijft de balk zelf staan en beweegt alleen
   een plaat erachter (::before) van volle breedte naar het zwevende vlak; de inhoud schuift mee met dezelfde curve. */
@media (min-width: 1000px) {
  .bar.floating { top: 0; left: 0; right: 0; max-width: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; box-shadow: none; }
  .bar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid transparent; border-radius: 0; background-color: rgb(var(--bg-rgb) / 0); box-shadow: 0 12px 40px rgb(var(--shadow-rgb) / calc(0 * var(--sh))); pointer-events: none; }
  html.js .bar::before { transition: top .6s var(--ease), bottom .6s var(--ease), left .6s var(--ease), right .6s var(--ease), border-radius .6s var(--ease), background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
  .bar.floating::before { top: 12px; bottom: 0; left: max(var(--gutter), calc((100vw - var(--content)) / 2)); right: max(var(--gutter), calc((100vw - var(--content)) / 2)); border-radius: var(--s3); background-color: rgb(var(--bg-rgb) / 0.76); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1); border-color: var(--line-2); box-shadow: 0 12px 40px rgb(var(--shadow-rgb) / calc(0.35 * var(--sh))); }
  .bar > .wrap, .bar.floating > .wrap { width: min(100% - 2 * var(--gutter), var(--content)); height: 72px; padding: 0; }
  html.js .bar > .wrap { transition: height .6s var(--ease), padding .6s var(--ease); }
  .bar.floating > .wrap { height: 80px; padding: 12px var(--s2) 0 var(--s3); }
  .bar.floating .panel { top: calc(80px + 8px); left: max(var(--gutter), calc((100vw - var(--content)) / 2)); right: max(var(--gutter), calc((100vw - var(--content)) / 2)); }
}

/* Het paneel: rustiger open en dicht (admin, 12 oktober nacht, na Ryan: "gaat heel snel, bij Oura is dat heel smooth"), en een
   lijn tussen de onderdelen. Het paneel komt in ruim een halve seconde, de regels en het beeld volgen kort na elkaar. */
.panel .links { gap: 0; }
.panel .links li + li { border-top: 1px solid var(--line); }
.panel .links a { padding: 20px 0; margin: 0; border-radius: 0; transition: padding-left .45s var(--ease); }
.panel .links a:hover, .panel .links a:focus-visible { background: none; padding-left: 10px; }
.panel .links b { transition: color .3s ease; }
.panel .links a:hover b, .panel .links a:focus-visible b { color: var(--accent-text); }
.panel .links.two li:nth-child(2) { border-top: 0; }
.scrim { transition: opacity .55s var(--ease); }
html.js .panel { opacity: 0; transform: translateY(-12px); transition: opacity .45s var(--ease), transform .65s var(--ease); }
html.js .panel.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .75s var(--ease); }
html.js .panel .links li, html.js .panel .visual { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
html.js .panel.in .links li, html.js .panel.in .visual { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease); }
html.js .panel.in .links li:nth-child(1) { transition-delay: .10s; }
html.js .panel.in .links li:nth-child(2) { transition-delay: .16s; }
html.js .panel.in .links li:nth-child(3) { transition-delay: .22s; }
html.js .panel.in .links li:nth-child(4) { transition-delay: .28s; }
html.js .panel.in .visual { transition-delay: .14s; }
.menu .chev { transition: transform .5s var(--ease); }

/* Leesbaar boven lichte blokken (Ryan, 12 oktober nacht: "die achtergrond is wit, je ziet het bijna niet"): de plaat is bijna dicht
   (93%) en de menutekst is lichter. Op de telefoon dezelfde dichtheid. */
.menu .items > li > a, .menu .items > li > button, .menu .login { color: rgb(var(--off-rgb) / 0.84); }
.menu .items > li.alt > button, .menu .items > li.alt > a { color: var(--accent-hover); }
@media (max-width: 999px) { .bar.floating { background: rgb(var(--bg-rgb) / 0.86); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); } } /* 15 nov: hetzelfde matte glas als op de computer */

/* Vangnet (admin, 12 oktober nacht): zolang het menuscript niet heeft gedraaid, of als het een keer niet laadt, is de balk een
   dichte donkere balk. Zo staat er nooit lichte menutekst op een licht blok. */
html:not(.menu-ready) .bar { background: rgb(var(--bg-rgb) / 0.95); border-bottom-color: var(--line); }

/* Bovenaan de pagina (admin, 12 oktober nacht; Ryan drie keer: "Inloggen zie ik bijna niet, wit op wit"). De doorzichtige balk stond
   boven de lichte foto van de hero. De plaat is nu ook bovenaan donker (volle breedte, licht doorschijnend met vervaging) en
   wordt bij scrollen het zwevende vlak. */
@media (min-width: 1000px) {
  .bar::before { background-color: rgb(var(--bg-rgb) / 0.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
  .bar.floating::before { background-color: rgb(var(--bg-rgb) / 0.76); border-color: var(--line-2); }
}

/* De balk iets groter (admin, 12 oktober nacht; Ryan: "net iets te klein geworden, het logo ook"). Bovenaan 84 hoog, zwevend 76,
   logo 36, de knop 44. Boven en onder gelijk: het logo 20 en 20, de knop 16 en 16. */
@media (min-width: 1000px) {
  .bar .brand img { height: 36px; }
  .bar > .wrap, .bar.floating > .wrap { height: 84px; }
  .bar.floating > .wrap { height: 88px; padding: 12px var(--s2) 0 var(--s3); }
  .bar .btn.small { height: 44px; padding: 0 20px; }
  .panel { top: 84px; }
  .bar.floating .panel { top: calc(88px + 8px); }
  .menu .items > li > a, .menu .items > li > button, .menu .login { font-size: 15px; }
}

/* Burn-out in het menu heeft dezelfde kleur als de rest (Ryan, 12 oktober nacht: "ik snap niet waarom die geel is") */
.menu .items > li.alt > button, .menu .items > li.alt > a { color: rgb(var(--off-rgb) / 0.84); }
.menu .items > li.alt > button:hover, .menu .items > li.alt > button[aria-expanded="true"] { color: var(--off); }
.sheet-body details.alt summary { color: inherit; }

/* Het menu, ronde van 12 oktober nacht. Inloggen is geen pagina met uitleg maar de ingang voor cliënten: een eigen omlijnde knop met
   een icoon, los van de rij. De inhoud van een paneel staat boven en onder gelijk: de eerste en de laatste regel zonder eigen
   ruimte, en het beeld even hoog als de lijst ernaast. */
.menu .login { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; margin-left: var(--s1); border: 1px solid var(--line-2); border-radius: 999px; color: var(--off); font-weight: 500; transition: border-color .3s ease, background-color .3s ease; }
.menu .login:hover { border-color: var(--accent-line); background-color: rgb(var(--off-rgb) / 0.06); }
.menu .login svg { width: 18px; height: 18px; flex: none; }
.panel > .wrap { align-items: stretch; }
.panel .links { align-content: center; }
.panel .links li:first-child a { padding-top: 0; }
.panel .links li:last-child a { padding-bottom: 0; }
.panel .visual { aspect-ratio: auto; min-height: 200px; height: 100%; }

/* De balk bovenaan de pagina, opnieuw (Ryan, 12 oktober nacht: "een mini laagje onder de balk", "sluit rechts niet aan", "blokt veel
   van de handen"). Bovenaan is er geen vlak meer maar een zachte donkere waas over de volle breedte die naar onder uitloopt: de
   menutekst blijft leesbaar en de foto blijft zichtbaar. Bij scrollen neemt het zwevende vlak het over. De balk zelf heeft geen
   rand meer, zodat niets een pixel inspringt. */
@media (min-width: 1000px) {
  .bar { border-width: 0; }
  .bar::before { background-color: rgb(var(--bg-rgb) / 0); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
  /* 15 nov (Ryan: boven wit "iets te veel doorschemert", wel "minimaal" doorschijnen "en mat", zoals Apple): dichter, sterkere vervaging en meer verzadiging */
  .bar.floating::before { background-color: rgb(var(--bg-rgb) / 0.86); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); border-color: var(--line-2); }
  .bar::after { content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: 170px; pointer-events: none; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.88) 0%, rgb(var(--bg-rgb) / 0.66) 42%, rgb(var(--bg-rgb) / 0.28) 74%, rgb(var(--bg-rgb) / 0) 100%); opacity: 1; }
  html.js .bar::after { transition: opacity .5s ease; }
  .bar.floating::after, .bar.open::after { opacity: 0; }
  .bar.open:not(.floating)::before { background-color: rgb(var(--bg-rgb) / 0.96); }
  /* Inloggen links van de knop: de gewone volgorde (inloggen als tweede keuze, de hoofdactie helemaal rechts) */
}

/* Van pagina naar pagina (admin, 12 oktober nacht; Ryan: "het menu flipt houterig in één keer naar de bovenkant"). Twee dingen:
   1. Zolang het menuscript nog niet had gedraaid was de balk een dichte donkere balk, die daarna omsprong. Dat vangnet is op de
      computer niet meer nodig, omdat de waas bovenaan de menutekst altijd leesbaar houdt.
   2. De overgang tussen twee pagina's vloeit over (view transitions; browsers die het niet kennen slaan dit over). De balk heeft
      een eigen naam, zodat hij van het zwevende vlak rustig terug naar boven schuift in plaats van te verspringen. */
@media (min-width: 1000px) { html:not(.menu-ready) .bar { background: transparent; border-bottom-color: transparent; } }
@view-transition { navigation: auto; }
/* de naam staat op de inhoud van de balk en niet op de balk zelf: een element met een view-transition-name sluit de pagina erachter af, waardoor de matglas-vervaging van de plaat niets te vervagen heeft */
.bar > .wrap { view-transition-name: sitebar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-group(sitebar) { animation-duration: .55s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* de balk schuift weg bij naar beneden scrollen en komt terug bij naar boven scrollen (Ryan 13 okt, zoals Oura) */
html.js .bar { transition: transform .5s var(--ease), opacity .4s ease, background .35s var(--ease), border-color .35s var(--ease), top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), border-radius .35s var(--ease); }
.bar.away { transform: translateY(-120%); opacity: 0; pointer-events: none; }
.bar.away:focus-within, .bar.away.open { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { html.js .bar { transition: none; } }
/* de zwevende balk is breder dan de inhoud: alleen een smalle rand aan de buitenkant, zoals bij Oura (Ryan 13 okt) */
@media (min-width: 1000px) {
  .bar.floating::before { left: var(--island-gap); right: var(--island-gap); }
  .bar.floating > .wrap { width: calc(100% - 2 * var(--island-gap)); }
  .bar.floating .panel { left: var(--island-gap); right: var(--island-gap); }
}
/* bovenaan en zwevend dezelfde maat en plek (Ryan 13 okt): alleen de plaat komt en gaat, het logo en de links verspringen niet; het logo staat iets verder naar binnen */
@media (min-width: 1000px) {
  .bar > .wrap, .bar.floating > .wrap { width: calc(100% - 2 * var(--island-gap)); height: 88px; padding: 12px var(--s3) 0 var(--s4); }
  .bar .panel, .bar.floating .panel { top: calc(88px + 8px); left: var(--island-gap); right: var(--island-gap); }
  .bar::before { top: 12px; bottom: 0; left: var(--island-gap); right: var(--island-gap); border-radius: var(--s3); }
}
/* de balk iets minder rond dan de blokken (Ryan 13 okt) */
@media (min-width: 1000px) { .bar::before, .bar.floating::before { border-radius: 14px; } .bar .panel { border-radius: 16px; } }
/* de balk zoals Oura: 24 px van de rand, het logo 40 px binnen de plaat (Ryan 14 okt). Vaste maten, los van --island-gap (dat is in de richting 0) */
@media (min-width: 1000px) {
  .bar::before, .bar.floating::before { left: 24px; right: 24px; }
  .bar > .wrap, .bar.floating > .wrap { width: calc(100% - 48px); padding-left: 40px; padding-right: 24px; }
  .bar .panel, .bar.floating .panel { left: 24px; right: 24px; }
}
/* Tussen 1000 en 1120 breed: compacter, zodat de balk op één regel blijft */
@media (min-width: 1000px) and (max-width: 1120px) { .bar > .wrap, .bar.floating > .wrap { width: calc(100% - 64px); } .bar .brand img { width: 132px; height: auto; } .bar .menu { margin-left: 24px; } .bar .menu .items { gap: 14px; } .bar .menu .items > li { white-space: nowrap; } .bar .menu a.login { font-size: 0; gap: 0; width: 44px; height: 44px; padding: 0; justify-content: center; } .bar .menu a.login svg { width: 18px; height: 18px; } }
/* Het menu op de telefoon vult het scherm: de blur op de balk maakt anders van de balk het kader van het vaste menu (64 px hoog) */
html.menu-open .bar, html.menu-open .bar.floating { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; filter: none !important; }

/* Ryan 23 oktober: de pil op de telefoon (na scrollen) iets minder rond, zodat hij dezelfde soort hoek heeft als de pil op de computer.
   Zelfde 24 oogde op de lagere telefoonbalk (56) bijna als een capsule; 16 geeft dezelfde verhouding. Bovenaan blijft het een rechte balk. */
@media (max-width: 999px) { .bar.floating { border-radius: 16px; } }

/* Ryan 12 november (popup "Ja, Na"): op de telefoon geen lijn onder de balk bovenaan; die maakte er "zo'n blokker" van.
   17 van 19 gemeten premium sites hebben er ook geen. De zwevende pil na scrollen houdt zijn rand. Afgestemd met Chris. */
@media (max-width: 999px) {
  .bar:not(.floating), html:not(.menu-ready) .bar:not(.floating), .bar.open:not(.floating) { border-bottom-color: transparent; }
}

/* 15 nov (Ryan: bovenaan geen dichte balk om het logo, maar "doorschijnend ... en aan de bovenkant iets donkerder", het verloop
   dat de computer al heeft): op telefoon en tablet ook alleen een zacht donker verloop boven de foto. Het zwevende vlak blijft mat glas. */
@media (max-width: 999px) {
  html.menu-ready .bar:not(.floating):not(.open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
  .bar::after { content: ""; position: absolute; z-index: -2; left: -1px; right: -1px; top: -1px; height: calc(100% + 19px); /* -1px: ook over de rand van 1 px, anders een lichte lijn boven en opzij */ pointer-events: none; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.72) 0%, rgb(var(--bg-rgb) / 0.64) 14%, rgb(var(--bg-rgb) / 0.55) 27%, rgb(var(--bg-rgb) / 0.45) 39%, rgb(var(--bg-rgb) / 0.35) 50%, rgb(var(--bg-rgb) / 0.26) 60%, rgb(var(--bg-rgb) / 0.18) 69%, rgb(var(--bg-rgb) / 0.11) 78%, rgb(var(--bg-rgb) / 0.06) 86%, rgb(var(--bg-rgb) / 0.025) 93%, rgb(var(--bg-rgb) / 0) 100%); /* zachte curve, geen streep (Ryan: "iets meer wegfaden") */ opacity: 1; transition: opacity .5s ease; } /* Ryan: niet langer dan de balk, bovenaan donkerder zodat ELIMA op een lichte foto leesbaar blijft */
  .bar.floating::after, .bar.open::after { opacity: 0; }
}

/* 15 nov: het menu-item heet nu "De ELIMA Methode" (Ryan); tussen 1000 en 1120 breed iets minder ruimte tussen de items,
   zodat de knop "Plan een kennismaking" niet buiten de balk valt. */
@media (min-width: 1000px) and (max-width: 1120px) { .bar .menu { gap: 12px; } .bar .menu .items { gap: 10px; } }
@media (min-width: 1000px) { .bar .menu .items > li { white-space: nowrap; } }
@media (min-width: 1121px) and (max-width: 1240px) { .bar .menu { gap: 20px; } .bar .menu .items { gap: 20px; } }
@media (min-width: 1000px) and (max-width: 1040px) { .bar .brand img { width: 112px; height: auto; } .bar .menu { margin-left: 12px; gap: 8px; } .bar .menu .items { gap: 8px; } }
@media (min-width: 1121px) and (max-width: 1240px) { .bar .menu a.login { font-size: 0; gap: 0; width: 44px; height: 44px; padding: 0; justify-content: center; } .bar .menu a.login svg { width: 18px; height: 18px; } }