/* Storingsknop + uitschuifpaneel.
   Alleen CSS voor de beweging, geen library. Contrast wit op #b42318 = 6,4:1 (WCAG AA).
   Bewust een zijtab op élk formaat: onderaan zit al de mobiele balk met bellen en
   WhatsApp, en twee balken onder elkaar is één te veel. */

.st-knop{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:9998;background:#b42318;color:#fff;text-decoration:none;
  padding:18px 11px;border-radius:0 10px 10px 0;
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  font-size:14px;font-weight:700;letter-spacing:.2px;
  display:flex;align-items:center;
  transition:background .18s ease,padding .18s ease;
}
.st-knop__tekst{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.st-knop:hover,.st-knop:focus-visible{background:#8f1c13;padding-right:15px}
.st-knop:focus-visible{outline:3px solid #fff;outline-offset:-6px}

.st-overlay{
  position:fixed;inset:0;z-index:9998;background:rgba(12,26,31,.45);
  opacity:0;transition:opacity .22s ease;
}
.st-overlay.is-open{opacity:1}

.st-paneel{
  position:fixed;left:0;top:0;bottom:0;z-index:9999;
  width:min(420px,100%);background:#fff;
  display:flex;flex-direction:column;
  box-shadow:6px 0 30px rgba(0,0,0,.25);
  transform:translateX(-100%);transition:transform .24s ease;
}
.st-paneel.is-open{transform:translateX(0)}
.st-paneel__kop{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #e6e9ed;flex:none;
}
.st-paneel__titel{font-size:15px;font-weight:800;color:#0c1a1f}
.st-paneel__sluit{
  width:36px;height:36px;border:none;background:#f3f4f6;border-radius:50%;
  font-size:22px;line-height:1;color:#52525b;cursor:pointer;font-family:inherit;
}
.st-paneel__sluit:hover{background:#e4e4e7}
.st-paneel__sluit:focus-visible{outline:3px solid #0a7a75;outline-offset:2px}
.st-paneel__body{flex:1;min-height:0}
.st-paneel__frame{width:100%;height:100%;border:none;display:block}

body.st-paneel-open{overflow:hidden}

/* Mobiel: dezelfde zijtab, alleen compacter. Iets boven het midden, zodat hij
   nergens in de buurt komt van de vaste balk onderaan. Paneel over de volle breedte. */
@media (max-width:767px){
  .st-knop{
    top:42%;
    padding:14px 8px;
    font-size:12.5px;
    border-radius:0 8px 8px 0;
  }
  .st-knop:hover,.st-knop:focus-visible{padding-right:11px}

  .st-paneel{width:100%;box-shadow:none}
  .st-paneel__kop{padding:16px}
  .st-paneel__sluit{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .st-paneel,.st-overlay,.st-knop{transition:none}
}