:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --ink:#0b1b2b;
  --muted:#5c6b7a;
  --line:rgba(11,27,43,.12);

  --blue:#0b6bb3;
  --blue2:#0a4f86;
  --red:#c91d1d;
  --green:#1f7a4a;

  --shadow:0 12px 30px rgba(11,27,43,.12);
  --radius:18px;
  --radius2:24px;
  --max:1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.00;
}

a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.morocco-bg{
  /* optioneel: achtergrondpatroon */
}

/* HEADER */
    .bHeader{
      position: sticky;
      top: 0;
      z-index: 50;
      background-color: #ccdbec;
      box-shadow: 0 2px 0 rgba(0,0,0,.15);
    }
    .bHeaderInner{
      max-width: 1100px;
      margin: 0 auto;
      padding: 10px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .brandMark{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 44px;
    }
    .brandMark img{
      height: 34px;
      display:block;
      border-radius: 8px;
    }
    .menuBtn{
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .06);
      color: #060000;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .menuBtn:hover{ background: rgba(255,255,255,.10); }