.elementor-7619 .elementor-element.elementor-element-2f6af47{--display:flex;}:root{--page-title-display:none;}
/* Start custom CSS for html, class: .elementor-element-8bd856a *//* =====================================================================
   BrokenPhone.nl — Privacybeleid (Single CSS, menu fixed)
   Doel: 1 bron van waarheid, geen bp-* legacy, geen dubbele fixes.
   ===================================================================== */

/* =========================
   Design tokens (OPTIE B)
   ========================= */
:root{
  --bg:#EEF2F7;
  --surface:#FFFFFF;
  --surface-2:#F6F8FC;
  --border:#E3EAF4;

  --text:#1F2A37;
  --muted:#6B7280;
  --muted-2:#4B5563;

  --accent:#2C3E55;
  --accent-soft:#E6EDF7;

  --cta:#F2C94C;
  --cta-text:#111;

  --shadow:0 10px 30px rgba(17,24,39,.08);
  --container:1180px;
  --radius:18px;
  --radius-sm:14px;
  --topbar-h-desktop:76px;
  --topbar-h-mobile:70px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:var(--topbar-h-desktop);
}
@media (max-width:680px){ body{ padding-top:var(--topbar-h-mobile); } }

main{flex:1 0 auto}
footer{margin-top:auto}

.wrap{max-width:var(--container);margin:0 auto;padding:0 18px}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
h1,h2,h3{margin:0 0 8px}
img{max-width:100%;height:auto;display:block}
.section{padding:36px 0}
.small{font-size:14px;color:var(--muted);line-height:1.45}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Performance */
.section, .footer-panel { content-visibility:auto; contain-intrinsic-size: 600px; }

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;border-radius:12px;font-weight:900
}
.btn-primary{background:var(--cta);color:var(--cta-text)}
.btn-ghost{
  background:rgba(255,255,255,.92);
  color:var(--accent);
  border:2px solid rgba(44,62,85,.35)
}
.btn-ghost:hover{background:#fff;border-color:rgba(44,62,85,.55)}
.btn-link{display:inline-flex;align-items:center;gap:6px;font-weight:900;color:var(--accent)}
.btn-link svg{width:16px;height:16px}

/* =====================================================================
   TOPBAR + HAMBURGER MENU (DEFINITIEF)
   Werkt met checkbox #nav-toggle, zonder extra hacks.
   ===================================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:2147483646;
  background:rgba(246,248,252,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 24px rgba(17,24,39,.08);
  overflow:visible;
}
.topbar__row{
  min-height:var(--topbar-h-desktop);
  display:flex;align-items:center;gap:16px;
}
@media (max-width:680px){ .topbar__row{ min-height:var(--topbar-h-mobile); } }

.topbar__logo img{height:42px;width:auto}
@media (max-width:680px){ .topbar__logo img{height:36px} }

.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:12px}

.topbar__phone{
  display:grid;place-items:center;width:48px;height:48px;border-radius:999px;
  border:1px solid rgba(44,62,85,.22);
  background:rgba(255,255,255,.7);
  color:var(--accent);
  transition:.15s ease;
}
.topbar__phone:hover{transform:translateY(-1px);background:#fff}
.topbar__phone svg{width:22px;height:22px}

.menu-btn{
  cursor:pointer;
  padding:10px 14px;
  background:var(--cta);
  border-radius:12px;
  font-weight:900;
  color:var(--cta-text);
  display:inline-flex;
  align-items:center;
  user-select:none;
}
.menu-btn:hover{transform:translateY(-1px)}

/* Checkbox uit beeld (maar klikbaar via label) */
#nav-toggle{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
}

/* Backdrop */
.backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(17,24,39,.45);
  z-index:2147483645;
}

/* Drawer */
nav.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(88vw,380px);
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-18px 0 46px rgba(17,24,39,.18);
  z-index:2147483647;

  transform:translate3d(110%,0,0);
  transition:transform .25s ease;
  padding-top:var(--topbar-h-desktop);
  will-change:transform;

  display:block;
  visibility:visible;
  opacity:1;
}
@media (max-width:680px){ nav.drawer{ padding-top:var(--topbar-h-mobile); } }

nav.drawer .inner{height:100%;overflow:auto;padding:16px 18px 24px}
nav.drawer a{
  display:block;
  padding:14px 8px;
  border-bottom:1px solid var(--border);
  font-weight:900;
}
nav.drawer a:hover{background:var(--surface-2)}
nav.drawer .btncta{
  display:block;text-align:center;
  background:var(--cta);color:var(--cta-text);
  border-radius:12px;padding:12px 10px;
  font-weight:900;margin-top:10px
}

/* Open states (CSS-only) */
#nav-toggle:checked ~ .backdrop{ display:block; }
#nav-toggle:checked ~ nav.drawer{ transform:translate3d(0,0,0); }

/* Optioneel scroll-lock via JS html.nav-open (werkt ook zonder) */
html.nav-open{ overflow:hidden; }

/* =====================================================================
   Privacy page layout
   ===================================================================== */
.page-hero{ padding:28px 0 10px; }
.page-hero .panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 22px;
}
.page-hero h1{
  margin:0 0 10px;
  color:var(--accent);
  font-weight:900;
  font-size:34px;
  line-height:1.15;
  letter-spacing:-0.3px;
}
@media (max-width:680px){ .page-hero h1{ font-size:26px; } }

.meta-row{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:10px;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--accent);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}
.notice{
  background:#FFF7D6;
  border:1px solid #F1E0A3;
  color:#5C4A00;
  border-radius:12px;
  padding:12px 14px;
  margin-top:14px;
}

.page-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:18px;
  align-items:start;
  margin-top:16px;
}
@media (max-width:1024px){ .page-grid{ grid-template-columns:1fr; } }

.content-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 18px;
}

.toc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 16px;
  position:sticky;
  top: calc(var(--topbar-h-desktop) + 14px);
}
@media (max-width:680px){ .toc{ position:relative; top:auto; } }

.toc h3{ margin:0 0 8px; color:var(--accent); font-size:16px; font-weight:900; }
.toc a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--accent);
  font-weight:900;
}
.toc a:hover{
  background:var(--surface-2);
  border-color:var(--border);
}

.prose h2{
  margin-top:18px;
  color:var(--accent);
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.2px;
}
.prose p{
  margin:8px 0 0;
  color:var(--muted-2);
  line-height:1.75;
}
.prose ul{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted-2);
  line-height:1.75;
}
.prose li{ margin:6px 0; }
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12.5px;
  color:var(--accent);
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:8px;
  white-space:nowrap;
}

details{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  margin:10px 0;
}
summary{ cursor:pointer; font-weight:900; color:var(--accent); }
details p{ margin:10px 0 0; color:var(--muted-2); line-height:1.6; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer-panel{
  background:var(--surface-2);
  color:var(--muted);
  box-shadow:var(--shadow);
  position:relative;
  left:50%; right:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
  border-radius:0;
  padding:48px 0;
  border-top:1px solid var(--border);
}
footer h4{ color:var(--accent); margin:0 0 12px; }
footer a{ color:var(--accent); font-weight:900; }

.f-cols{ display:grid; grid-template-columns:2.2fr 1.2fr 1.2fr 1.4fr; gap:28px; }
@media (max-width:1100px){ .f-cols{ grid-template-columns:1fr 1fr; } }

.f-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}
.hours{ display:grid; gap:6px; }
.hours div{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted-2); }

.footer-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.footer-cta a{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  font-weight:900;
}
.footer-cta a.primary{
  background:var(--cta);
  border-color:rgba(0,0,0,.08);
  color:var(--cta-text);
}
.copyright{ margin-top:18px; color:var(--muted); font-size:13px; }

.bizmeta{ margin-top:10px; }
.bizmeta div{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted-2); }
.bizmeta code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12.5px;
  color:var(--accent);
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:8px;
}

/* =====================================================================
   Sticky CTA (mobile)
   ===================================================================== */
.sticky{
  position:fixed; left:0; right:0; bottom:0;
  z-index:50;
  display:none;
  background:rgba(246,248,252,.96);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--border);
  padding-bottom:var(--safe-bottom);
}
.sticky .wrap{ display:flex; gap:10px; padding:10px 12px; }
.sticky .btn{ flex:1; padding:12px 10px; border-radius:12px; }

.btn-wa{ background:#25D366; color:#0C3D1E; font-weight:900; }
.btn-call{
  background:#fff;
  border:2px solid rgba(44,62,85,.35);
  color:var(--accent);
  font-weight:900;
}
.btn-call:hover{ border-color:rgba(44,62,85,.55); }

@media (max-width:680px){
  .sticky{ display:block; }
  .sticky .btn{ padding:10px 8px; font-size:14px; }
}/* End custom CSS */