/* 23 okt 2026: alleen voor de app (vanaf het beginscherm geopend). Elke pagina zet in de kop de klasse "in-app" op <html>
   als dat zo is; js/nav.js bouwt dan de balk bovenin (Terug) en de balk onderin (Start, Voeding, Beweging, Aandacht, Meer).
   Het menu van de website verdwijnt in de app. Op de gewone website doet dit bestand niets. */
html.in-app .nav{display:none!important}
html.in-app body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
html.in-app [id]{scroll-margin-top:calc(64px + env(safe-area-inset-top))} /* een link naar #les-3 valt niet onder de balk bovenin */
html.in-app .c-plakbalk{bottom:calc(80px + env(safe-area-inset-bottom))}

.app-top{position:fixed;inset:0 0 auto 0;z-index:25;height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;justify-content:center;background:rgba(11,22,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(239,232,220,.12);font-family:Poppins,system-ui,sans-serif;font-weight:300}
.app-top .terug{position:absolute;left:4px;bottom:6px;height:40px;display:flex;align-items:center;gap:6px;padding:0 12px;
  font:inherit;font-size:14px;color:#efe8dc;background:none;border:0;border-radius:10px;cursor:pointer}
.app-top .terug svg{width:10px;height:16px;color:#c9a45c}
.app-top .terug:focus-visible{outline:2px solid #c9a45c;outline-offset:-2px}
.app-top .merk{display:flex;align-items:center;gap:8px;margin-bottom:-1px}
.app-top .merk img{display:block;width:auto;height:26px}
.app-top .merk .woord{height:22px}

.app-onder{position:fixed;inset:auto 0 0 0;z-index:61;display:grid;grid-template-columns:repeat(5,1fr);padding:0 4px env(safe-area-inset-bottom);
  background:rgba(11,22,20,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(239,232,220,.12);
  font-family:Poppins,system-ui,sans-serif;font-weight:400}
.app-onder a,.app-onder button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0 9px;font:inherit;font-size:10.5px;
  letter-spacing:.03em;line-height:1.2;color:#bac3be;text-decoration:none;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-onder svg{width:22px;height:22px}
.app-onder .aan{color:#c9a45c}
.app-onder a:focus-visible,.app-onder button:focus-visible{outline:2px solid #c9a45c;outline-offset:-4px;border-radius:10px}

.app-meer{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;background:rgba(0,0,0,.55);font-family:Poppins,system-ui,sans-serif;font-weight:300}
.app-meer[hidden]{display:none}
.app-meer .vak{width:100%;max-height:80vh;overflow-y:auto;padding:10px 16px calc(88px + env(safe-area-inset-bottom));background:#0d1b18;
  border-top:1px solid rgba(201,164,92,.38);border-radius:20px 20px 0 0}
.app-meer .greep{width:40px;height:4px;margin:4px auto 10px;border-radius:4px;background:rgba(239,232,220,.25)}
.app-meer a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;font-size:15px;color:#efe8dc;text-decoration:none;
  border-bottom:1px solid rgba(239,232,220,.1)}
.app-meer a::after{content:"›";color:#c9a45c;font-size:20px;line-height:1}
.app-meer a.klein{font-size:13px;color:#bac3be;padding:11px 4px}
.app-meer a:last-child{border-bottom:0}
/* meldingen: één schakelaar onderaan het Meer-menu (js/nav.js) */
.app-melding{display:flex;align-items:center;gap:16px;margin-top:6px;padding:16px 4px 4px;border-top:1px solid rgba(201,164,92,.25)}
.app-melding>div{flex:1;min-width:0}
.app-melding b{display:block;font-weight:400;font-size:15px;color:#efe8dc}
.app-melding span{display:block;font-size:12.5px;color:#bac3be;line-height:1.45;margin-top:2px}
.app-melding em{display:block;font-style:normal;font-size:12.5px;color:#c9a45c;line-height:1.45;margin-top:6px}
.app-melding em[hidden]{display:none}
.app-melding button{flex:none;position:relative;width:50px;height:30px;border-radius:999px;border:1px solid rgba(239,232,220,.25);background:rgba(239,232,220,.08);cursor:pointer;transition:background .2s,border-color .2s}
.app-melding button::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#efe8dc;transition:transform .2s}
.app-melding button[aria-checked="true"]{background:#c9a45c;border-color:#c9a45c}
.app-melding button[aria-checked="true"]::after{transform:translateX(20px);background:#0b1614}
.app-melding button:disabled{opacity:.6}
.app-melding button:focus-visible{outline:2px solid #c9a45c;outline-offset:3px}
/* eenmalige vraag om meldingen, onderin boven de app-balk (js/nav.js, meldingVraag) */
.app-vraag{position:fixed;left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:40;padding:14px 14px 12px;background:#0d1b18;border:1px solid rgba(201,164,92,.38);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.5);
  font-family:Poppins,system-ui,sans-serif;font-weight:400;color:#efe8dc;line-height:1.4;transform:translateY(30px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.app-vraag.aan{transform:none;opacity:1}
.app-vraag b{display:block;font-weight:500;font-size:15px}
.app-vraag span{display:block;font-size:13px;color:#bac3be;margin-top:2px}
.app-vraag .knoppen{display:flex;gap:10px;margin-top:12px}
.app-vraag button{flex:1;font:inherit;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:11px 10px;cursor:pointer}
.app-vraag .ja{background:#c9a45c;color:#0b1614;border:0}
.app-vraag .nee{background:none;color:#efe8dc;border:1px solid rgba(239,232,220,.3)}
.app-vraag button:focus-visible{outline:2px solid #c9a45c;outline-offset:3px}
/* "Deel de app met iemand", klein onderaan het Meer-menu (js/nav.js) */
.app-meer .app-deel{display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:6px;padding:11px 4px;font:inherit;font-size:13px;color:#bac3be;background:none;border:0;border-top:1px solid rgba(239,232,220,.1);cursor:pointer;text-align:left}
.app-meer .app-deel::after{content:"";width:16px;height:16px;flex:none;background:#c9a45c;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 7.5 12 3l4.5 4.5'/%3E%3Cpath d='M8 11H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 7.5 12 3l4.5 4.5'/%3E%3Cpath d='M8 11H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2'/%3E%3C/svg%3E") center/contain no-repeat}
.app-meer .app-deel:focus-visible{outline:2px solid #c9a45c;outline-offset:2px}