@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* DEMO: values Axel still has to fill in */
.ph{background:rgba(255,132,79,.2);outline:1px dashed #ff844f;outline-offset:1px;border-radius:2px;margin:0 .2em}
.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}
/* ============================================================
   AW Webdesign — legal pages (privacy, voorwaarden, cookies)
   ============================================================ */
:root{--black:#0a0a0a;--white:#f6f5f2;--orange:#ff844f;--pad:clamp(1.5rem,5vw,5rem)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--black);color:var(--white);font-family:Montserrat,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.7}
a{color:inherit}
::selection{background:var(--orange);color:var(--white)}
header{display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem var(--pad);border-bottom:1px solid rgba(246,245,242,.16)}
.mark{height:20px}
.back{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;transition:color .3s}
.back:hover{color:var(--orange)}
main{max-width:820px;margin:0 auto;padding:12vh var(--pad) 16vh}
h1{font-weight:300;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05}
.updated{margin-top:1.2rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,245,242,.45)}
.intro{margin-top:2.5rem;font-size:1.05rem;color:rgba(246,245,242,.8)}
h2{margin-top:3.2rem;font-weight:400;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.15rem;color:var(--white)}
h2 .n{color:var(--orange);margin-right:.7rem;font-weight:500}
h3{margin-top:1.8rem;font-weight:500;font-size:.96rem;color:var(--white)}
p{margin-top:1rem;color:rgba(246,245,242,.72);font-size:.96rem}
ul{margin:1rem 0 0 1.2rem;color:rgba(246,245,242,.72);font-size:.96rem}
li{margin-top:.5rem}
a.inline{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(255,132,79,.4)}
strong{color:var(--white);font-weight:500}
/* facts that still have to be filled in before going live */
mark.todo{background:rgba(255,132,79,.18);color:var(--orange);padding:0 .25em;border-radius:2px}

/* overview table (cookiebeleid) — stacks on small screens */
.tbl{width:100%;margin-top:1.4rem;border-collapse:collapse;font-size:.88rem}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.9rem .8rem .9rem 0;
  border-bottom:1px solid rgba(246,245,242,.16)}
.tbl th{font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,245,242,.45)}
.tbl td{color:rgba(246,245,242,.72)}
.tbl td:first-child{color:var(--white);font-weight:500}
@media (max-width:640px){
  .tbl thead{display:none}
  .tbl tr{display:block;padding:.9rem 0;border-bottom:1px solid rgba(246,245,242,.16)}
  .tbl td{display:block;border:0;padding:.2rem 0}
  .tbl td::before{content:attr(data-l) " · ";font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(246,245,242,.45)}
}

/* model form (herroeping) */
.box{margin-top:1.4rem;padding:1.4rem 1.6rem;border:1px solid rgba(246,245,242,.16)}
.box p:first-child{margin-top:0}

footer{border-top:1px solid rgba(246,245,242,.16);padding:2.4rem var(--pad);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,245,242,.62);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.legal-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.legal-nav a{display:inline-block;padding:.55rem 0;text-decoration:none;transition:color .3s}
.legal-nav a:hover,.legal-nav a[aria-current]{color:var(--orange)}
