/* gsm/gsm.css — de stijl van de gsm-laag (kop · balk · venster · zijpaneel), alleen op een smal scherm (tot 767 px).
   Rechte hoeken, de kleuren van de site. Buiten de media-query bestaat er niets: een groot scherm merkt dit bestand niet. */
.gk-kop,.gb-balk,.gb-venster,.gp-paneel,.gp-fond{display:none}
@media (max-width:767px){
  :root{--gsm-goud:#c9a227;--gsm-inkt:#0d0c0a;--gsm-papier:#f7f3ea;--gsm-gedempt:#a99f8c;--gsm-kop:56px;--gsm-balk:calc(64px + env(safe-area-inset-bottom))}
  html{scroll-padding-top:64px;scroll-padding-bottom:calc(var(--gsm-balk) + 12px)}
  body.gsm-aan{padding-bottom:var(--gsm-balk)}
  body.gsm-kop{padding-top:var(--gsm-kop)}

  /* ── de kop ── */
  .gk-kop{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;position:fixed;top:0;left:0;right:0;height:var(--gsm-kop);z-index:61;
    background:rgba(13,12,10,.94);border-bottom:1px solid rgba(201,162,39,.28);backdrop-filter:blur(8px)}
  .gk-menu{width:56px;height:var(--gsm-kop);background:none;border:0;color:var(--gsm-goud);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .gk-menu svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .gk-logo{justify-self:center;display:flex;align-items:center;height:var(--gsm-kop);padding:0 8px}
  .gk-logo img{height:28px;width:auto;display:block}
  .gk-rechts{display:flex;justify-content:flex-end;align-items:center;height:var(--gsm-kop)}
  .gk-kop .gk-rechts>*{width:48px!important;height:48px!important;flex:0 0 48px!important;display:flex;align-items:center;justify-content:center;margin:0 4px 0 0;font-size:22px}   /* wint van de eigen breedte van de knop (bv. .pb-avatar 34px) */
  /* de eigen kop van elke pagina wijkt voor de gsm-kop; op pagina's zonder gsm-kop (chat, kaasbrein) blijft de eigen hamburger en opent hij het paneel */
  body.gsm-kop :is(.pb-top,header.kop,.pk-top,.kop-logo,.menu-knop,.aanmeld-knop,#scrollProgress,.m-kop,[data-menu-open]){display:none!important}
  /* de chat: het scherm (.app = 100dvh) past tussen kop en balk; de gesprekken-knop (#mToggle) wordt rechts in de kop een tekstballon-icoon */
  body.gsm-aan .app{height:calc(100dvh - var(--gsm-balk))}
  body.gsm-kop .app{height:calc(100dvh - var(--gsm-balk) - var(--gsm-kop))}
  .gk-rechts #mToggle{border:0;background:none;border-radius:0}
  .gk-rechts #mToggle i{display:none}
  .gk-rechts #mToggle::before{content:"";display:block;width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E") center/contain no-repeat}
  /* iOS Safari zoomt de pagina in bij een invoerveld onder 16 px en zoomt niet terug: nooit kleiner dan 16 px op de telefoon */
  body.gsm-aan :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea){font-size:max(16px,1em)}
  body[data-gsm-pad="kaasbrein"] .palet{bottom:var(--gsm-balk)}
  body.gsm-aan #deelKnop{bottom:calc(var(--gsm-balk) + 16px)}
  body.gsm-aan .ds-standen-balk{bottom:var(--gsm-balk)}
  body.gsm-aan .pb-top-pijl{bottom:calc(var(--gsm-balk) + 20px)}
  body.gsm-aan .pb-toast{bottom:calc(var(--gsm-balk) + 24px)}
  body.gsm-aan .pb-tabs{margin-top:8px}
  body.kp-ronde-open .gb-balk{display:none}

  /* ── de balk ── */
  .gb-balk{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);height:var(--gsm-balk);padding-bottom:env(safe-area-inset-bottom);
    background:rgba(13,12,10,.96);border-top:1px solid rgba(201,162,39,.35);backdrop-filter:blur(8px)}
  .gb-balk button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;font:600 10.5px/1 'Open Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gsm-gedempt);background:none;border:0;padding:8px 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .gb-balk button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .gb-balk button.aan{color:var(--gsm-goud)}
  .gb-balk button.gb-scan{color:var(--gsm-papier)}
  .gb-balk button.gb-scan svg{width:28px;height:28px}
  .gb-toets-open .gb-balk{display:none}
  .gb-toets-open .gb-venster{bottom:0}

  /* ── het venster boven de balk (zoeken, scan) ── */
  .gb-venster{display:block;position:fixed;left:0;right:0;bottom:var(--gsm-balk);z-index:62;background:rgba(21,18,15,.98);border-top:1px solid rgba(201,162,39,.35);padding:14px 16px;box-shadow:0 -18px 40px rgba(0,0,0,.5)}
  .gb-venster[hidden]{display:none}
  .gb-venster h3{font:600 11px/1 'Open Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gsm-goud);margin:0 0 10px}
  .gb-venster p{font:300 14px/1.45 'Open Sans',sans-serif;color:var(--gsm-gedempt);margin:0 0 10px}
  .gb-venster .gb-dicht{position:absolute;right:6px;top:4px;width:44px;height:44px;background:none;border:0;color:var(--gsm-gedempt);font-size:24px;cursor:pointer}
  .gb-zoek{display:flex;gap:8px}
  .gb-zoek input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 14px;background:#0d0c0a;color:var(--gsm-papier);border:1px solid rgba(201,162,39,.5)}
  .gb-zoek input:focus{outline:2px solid var(--gsm-goud);outline-offset:1px}
  .gb-zoek input::placeholder{color:rgba(247,243,234,.35)}
  .gb-video{width:100%;max-height:52vh;background:#000;object-fit:cover;display:block}
  .gb-video[hidden],.gb-knop[hidden]{display:none}   /* 09-10: geen zwart vlak als er geen camerabeeld is (display:block won van [hidden]) */
  .gb-knop.gb-stil{background:none;color:var(--gsm-goud);border:1px solid rgba(201,162,39,.6);margin:0 8px 8px 0}
  .gb-code{font-size:11px;opacity:.6}
  .gb-knop{display:inline-flex;align-items:center;min-height:44px;font:700 12px/1 'Open Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:0 18px;background:var(--gsm-goud);color:#0d0c0a;border:0;cursor:pointer;text-decoration:none}

  /* ── het zijpaneel ── */
  .gp-fond{display:block;position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
  .gp-fond[hidden]{display:none}
  .gp-paneel{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:96;width:min(84vw,340px);background:#15120f;color:var(--gsm-papier);box-shadow:12px 0 40px rgba(0,0,0,.6);
    transform:translateX(-102%);transition:transform .22s ease;padding-bottom:env(safe-area-inset-bottom);overflow:auto;overscroll-behavior:contain}
  .gp-paneel.aan{transform:none}
  .gp-paneel[hidden]{display:none}
  body.gp-open{overflow:hidden}
  .gp-dicht{position:absolute;right:6px;top:6px;width:44px;height:44px;background:none;border:0;color:rgba(247,243,234,.7);font-size:26px;line-height:1;cursor:pointer;z-index:1}
  .gp-kop{background:linear-gradient(180deg,rgba(201,162,39,.22),rgba(201,162,39,.06));border-bottom:1px solid rgba(201,162,39,.35);padding:20px 18px 18px}
  .gp-kop::after{content:"";display:block;clear:both}
  .gp-avatar{float:left;width:52px;height:52px;margin:0 14px 0 0;display:flex;align-items:center;justify-content:center;background:#0d0c0a;border:1px solid var(--gsm-goud);color:var(--gsm-goud)}
  .gp-avatar svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .gp-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .gp-avatar.initiaal{font:600 26px/1 Oswald,sans-serif}
  .gp-wie{min-width:0;padding-right:36px}
  .gp-naam{display:block;font:600 18px/52px Oswald,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--gsm-papier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gp-google{clear:both;min-height:40px;margin:14px 0 0}
  .gp-google[hidden]{display:none}
  .gp-fout{clear:both;font:300 13px/1.4 'Open Sans',sans-serif;color:#ff8a7a;margin:10px 0 0}
  .gp-fout[hidden]{display:none}
  .gp-lijst{display:flex;flex-direction:column;padding:6px 0}
  .gp-lijst a{display:flex;align-items:center;gap:16px;padding:15px 20px;font:600 15px/1 'Open Sans',sans-serif;color:var(--gsm-papier);text-decoration:none;border-bottom:1px solid rgba(247,243,234,.06)}
  .gp-lijst a svg{width:24px;height:24px;flex:none;stroke:var(--gsm-goud);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .gp-lijst a.gp-hier{background:rgba(201,162,39,.1);box-shadow:inset 3px 0 0 var(--gsm-goud)}
  .gp-lijst a:active{background:rgba(201,162,39,.16)}
  .gp-voet{margin-top:auto;padding:12px 20px 18px;border-top:1px solid rgba(247,243,234,.08)}
  .gp-uit{display:flex;align-items:center;gap:16px;width:100%;padding:14px 0;background:none;border:0;font:600 15px/1 'Open Sans',sans-serif;color:var(--gsm-gedempt);cursor:pointer;text-align:left}
  .gp-uit[hidden]{display:none}
  .gp-uit svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .gp-voet small{display:block;font:300 11px/1.4 'Open Sans',sans-serif;color:rgba(247,243,234,.35);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
  .gp-voet small a{color:inherit;text-decoration:underline;text-underline-offset:2px}   /* Privacy: hetzelfde grijs, met een lijntje eronder (09-10) */
}